@import '../../../checkbox/checkbox.scss';

// The width/height of the checkbox element.
$oui-checkbox-size: 16px !default;

// The width of the checkbox border shown when the checkbox is unchecked.
$oui-checkbox-border-width: 1px;

// The base duration used for the majority of transitions for the checkbox.
$oui-checkbox-transition-duration: 90ms;

// Padding inside of a pseudo checkbox.
$_oui-pseudo-checkbox-padding: $oui-checkbox-border-width * 2;

// Size of the checkmark in a pseudo checkbox.
$_oui-pseudo-checkmark-size: $oui-checkbox-size -
  (3.5 * $_oui-pseudo-checkbox-padding);

.oui-pseudo-checkbox {
  width: $oui-checkbox-size;
  height: $oui-checkbox-size;
  border: $oui-checkbox-border-width solid #9c9c9c;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  transition: border-color $oui-checkbox-transition-duration
      $oui-linear-out-slow-in-timing-function,
    background-color $oui-checkbox-transition-duration
      $oui-linear-out-slow-in-timing-function;

  // Used to render the checkmark/mixedmark inside of the box.
  &::after {
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    transform: rotate(-45deg);
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    top: ($oui-checkbox-size * 0.5) - ($_oui-pseudo-checkmark-size * 0.25) -
      ($oui-checkbox-size * 0.05) - $oui-checkbox-border-width;
    left: 2px;
    width: 10px;
    height: 5px;
    transition: opacity 90ms $oui-linear-out-slow-in-timing-function;
    opacity: 0;
  }
}

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

.oui-pseudo-checkbox-checked::after {
  opacity: 1;
}