%currentBorder { border-color: currentColor; }

.tao-checkbox {
  &:not(&--disabled)  {
    &:hover {
      .tao-checkbox__input { @extend %currentBorder; }
    }
    &:active {
      .tao-checkbox__input {
        @extend %currentBorder;
        &::before {
          box-shadow: 0 0 0 8px currentColor;
        }
      }
    }
  }
  &__input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    box-sizing: content-box;
    transition-property: background-color, border-color;
    transition-duration: $transition-sm-slow;
    transition-timing-function: $transition-easing-default;
    border: $border-width-default solid currentColor;
    &::before {
      transition-property: box-shadow, opacity;
      transition-duration: $transition-sm-slow;
      transition-timing-function: $transition-easing-default;
      content: '';
      opacity: $opacity-low-maximum;
      border-radius: 999px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      box-shadow: 0px 0px 0px 0px currentColor;
    }
    &::after {
      transition-property: transform, border-color;
      transition-duration: $transition-sm-slow;
      transition-timing-function: $transition-easing-default;
      content: '';
      height: 5px;
      width: 10px;
      background: transparent;
      top: 4px;
      left: 3px;
      border: 2px solid transparent;
      border-top: 0;
      border-right: 0;
      transform-origin: center;
      position: absolute;
      transform: scale(.5);
    }
    &:focus {
      outline: none;
      @extend %currentBorder;
      &::before {
        box-shadow: 0 0 0 8px currentColor;
      }
    }
    &:checked {
      &::after {
        transform: rotateZ(-40deg) scale(1);
        opacity: 1;
      }
    }
    &:indeterminate {
      &::after {
        transform: scale(1);
        border-left: 0;
      }
    }
    &:checked, &:indeterminate {
      background: currentColor;
      @extend %currentBorder;
      &::after {
        border-color: white;
      }
    }
    &:disabled {
      background-color: rgba($color-text-03, $opacity-low-half);
      &:checked {
        background-color: currentColor;
      }
    }
  }
}