@import "../variables";
$checkbox-total-height: 1.8 * $unit;
$checkbox-size: 1.8 * $unit;
$checkbox-transition-duration: .2s;
$checkbox-focus-size: $checkbox-size * 2.3;
$checkbox-color: unquote("rgb(#{$color-primary})") !default;
$checkbox-text-color: unquote("rgb(#{$color-black})") !default;
$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;

.field {
  position: relative;
  display: block;
  height: $checkbox-size;
  margin-bottom: 1.5 * $unit;
  white-space: nowrap;
  vertical-align: middle;
}

.text {
  display: inline-block;
  padding-left: $unit;
  font-size: 1.4 * $unit;
  line-height: $checkbox-size;
  color: $checkbox-text-color;
  white-space: nowrap;
  vertical-align: top;
}

.input {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;

  &:focus:not(&:active) + .check:before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: $z-index-low;
    width: $checkbox-focus-size;
    height: $checkbox-focus-size;
    margin-top: - $checkbox-focus-size / 2;
    margin-left: - $checkbox-focus-size / 2;
    pointer-events: none;
    content: "";
    background-color: $checkbox-focus-color;
    border-radius: 50%;
  }
}

.check {
  position: relative;
  display: inline-block;
  width: $checkbox-size;
  height: $checkbox-size;
  vertical-align: top;
  cursor: pointer;
  border: 2px solid $checkbox-text-color;
  border-radius: 2px;
  transition-timing-function: $animation-curve-default;
  transition-duration: $checkbox-transition-duration;
  transition-property: background-color;
}

.checked {
  @extend .check;
  background-color: $checkbox-color;
  border-color: $checkbox-color;

  &:after {
    position: absolute;
    top: -.1 * $unit;
    left: .4 * $unit;
    width: .7 * $unit;
    height: 1.2 * $unit;
    content: "";
    border-color: #fff;
    border-style: solid;
    border-top: 0;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left: 0;
    transform: rotate(45deg);
    animation: checkmark-expand 140ms ease-out forwards;
  }
}

.ripple {
  background-color: $checkbox-color;
  opacity: .3;
  transition-duration: 650ms;
}

.disabled {
  @extend .field;

  .text {
    color: $checkbox-disabled-color;
  }

  .check {
    cursor: auto;
    border-color: $checkbox-disabled-color;
  }

  .checked {
    cursor: auto;
    background-color: $checkbox-disabled-color;
    border-color: transparent;
  }
}

@keyframes checkmark-expand {
  0% {
    top: .9 * $unit;
    left: .6 * $unit;
    width: 0;
    height: 0;
  }

  100% {
    top: -.1 * $unit;
    left: .4 * $unit;
    width: .7 * $unit;
    height: 1.2 * $unit;
  }
}