@import '../base/variables';

@tickPathLength: 17;
@keyframes checkTick {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes uncheckTick {
  to {
    stroke-dashoffset: @tickPathLength;
  }
}

.AknCheckbox {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background-color: @AknLightGray;
  border: 1px solid @AknMediumGrey;
  transition: background-color .2s ease-out;

  &:focus {
    outline: none;
    border: 1px solid @AknGrey;
  }

  &-tickPath {
    animation: uncheckTick .2s ease-in forwards;
    stroke-dasharray: @tickPathLength;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity .1s ease-out;
    transition-delay: .2s;
  }

  &--inline {
    margin-right: 5px;
  }

  &--disabled {
    opacity: 0.7;
  }

  &--disabled:not(&:focus) {
    border: 1px solid @AknMediumGrey;
  }

  &--checked&--disabled:not(&:focus) {
    border: 1px solid darken(@AknBlue, 10%);
  }

  &--checked {
    background-color: @AknBlue;
    border: 1px solid darken(@AknBlue, 10%);

    &:focus {
      border: 1px solid darken(@AknBlue, 30%);
    }

    .AknCheckbox-tickPath {
      animation-delay: .2s;
      animation: checkTick .2s ease-out forwards;
      stroke-dashoffset: @tickPathLength;
      opacity: 1;
      transition-delay: 0s;
    }
  }
}
