@include export-module('cc-input-checkbox-layout') {
  .co-input-checkbox {
    font-family: $cc-input-checkbox-font-family;
    font-size: $cc-input-checkbox-font-size;
    display: flex;
    align-items: center;

    &.read-only {
      opacity: .5;
    }

    .checkbox {
      display: flex;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      justify-items: center;
      width: $cc-input-checkbox-size;
      height: $cc-input-checkbox-size;
      border-radius: $cc-input-checkbox-border-radius;
      border-style: $cc-input-checkbox-border-style;
      border-width: $cc-input-checkbox-border-width;
      margin: $cc-input-checkbox-margin;
    }

    .checkmark {
      opacity: 0;

      &.show {
        opacity: 1;
        transform: scaleX(-1) rotate(135deg);
        height: $cc-input-checkbox-check-mark-height;
        width: $cc-input-checkbox-check-mark-width;
        transform-origin: left top;
        border-right: $cc-input-checkbox-check-mark-thickness solid $cc-input-checkbox-check-mark-color;
        border-top: $cc-input-checkbox-check-mark-thickness solid $cc-input-checkbox-check-mark-color;
        content: '';
        left: $cc-input-checkbox-check-mark-width * .2;
        top: $cc-input-checkbox-check-mark-height / 1.6;
        position: absolute;
      }
    }

    .label {
      &.clickable {
        cursor: pointer;
      }
    }

    @keyframes checkmark {
      0% {
        height: 0;
        width: 0;
        opacity: 1;
      }
      20% {
        height: 0;
        width: $cc-input-checkbox-check-mark-width;
        opacity: 1;
      }
      40% {
        height: $cc-input-checkbox-check-mark-height;
        width: $cc-input-checkbox-check-mark-width;
        opacity: 1;
      }
      100% {
        height: $cc-input-checkbox-check-mark-height;
        width: $cc-input-checkbox-check-mark-width;
        opacity: 1;
      }
    }
  }
}
