@include export-module('co-animated-checkbox-layout') {
  .co-animated-checkbox {
    font-family: $co-animated-checkbox-font-family;
    font-size: $co-animated-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: $co-animated-checkbox-size;
      height: $co-animated-checkbox-size;
      border-radius: $co-animated-checkbox-border-radius;
      border-style: $co-animated-checkbox-border-style;
      border-width: $co-animated-checkbox-border-width;
      margin: $co-animated-checkbox-margin;
    }

    .checkmark {
      opacity: 0;

      &.show {
        opacity: 1;
        animation-duration: 800ms;
        animation-timing-function: ease;
        animation-name: checkmark;
        transform: scaleX(-1) rotate(135deg);
        height: $co-animated-checkbox-check-mark-height;
        width: $co-animated-checkbox-check-mark-width;
        transform-origin: left top;
        border-right: $co-animated-checkbox-check-mark-thickness solid $co-animated-checkbox-check-mark-color;
        border-top: $co-animated-checkbox-check-mark-thickness solid $co-animated-checkbox-check-mark-color;
        content: '';
        left: -$co-animated-checkbox-check-mark-width * 0.5;
        top: $co-animated-checkbox-check-mark-height;
        position: absolute;
        &.additional {
          border-right: $co-animated-checkbox-check-mark-thickness solid $co-animated-checkbox-check-mark-color-additional;
          border-top: $co-animated-checkbox-check-mark-thickness solid $co-animated-checkbox-check-mark-color-additional;
        }
      }
    }

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

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