@import '../animation/noop.animation.scss';

$linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
$toggle-size: 16px !default;
$checkbox-size: $toggle-size !default;
$checkbox-border-width: 2px;
$checkbox-transition-duration: 90ms;
$_pseudo-checkbox-padding: $checkbox-border-width * 2;
$_pseudo-checkmark-size: $checkbox-size - (2 * $_pseudo-checkbox-padding);


.pseudo-checkbox {
  width: $checkbox-size;
  height: $checkbox-size;
  border: $checkbox-border-width solid;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  transition:
      border-color $checkbox-transition-duration $linear-out-slow-in-timing-function,
      background-color $checkbox-transition-duration $linear-out-slow-in-timing-function;
  &::after {
    position: absolute;
    opacity: 0;
    content: '';
    border-bottom: $checkbox-border-width solid currentColor;
    transition: opacity $checkbox-transition-duration $linear-out-slow-in-timing-function;
  }

  &.pseudo-checkbox-checked, &.pseudo-checkbox-indeterminate {
    border-color: transparent;
  }

  @include _noop-animation {
    &::after {
      transition: none;
    }
  }
}

.pseudo-checkbox-disabled {
  cursor: default;
}

.pseudo-checkbox-indeterminate::after {
  top: calc(($checkbox-size - $checkbox-border-width) / 2 - $checkbox-border-width);
  left: 0;
  width: $checkbox-size - ($checkbox-border-width * 2);
  opacity: 1;
}

.pseudo-checkbox-checked::after {
  top: calc(($checkbox-size / 2) - ($_pseudo-checkmark-size / 4) -
      ($checkbox-size / 10) - $checkbox-border-width);
  left: calc($_pseudo-checkbox-padding - $checkbox-border-width * 1.5);
  width: $_pseudo-checkmark-size;
  height: calc(($_pseudo-checkmark-size - $checkbox-border-width) / 2);
  border-left: $checkbox-border-width solid currentColor;
  transform: rotate(-45deg);
  opacity: 1;
}