@import '../../style/checkbox-common';

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

// Size of the checkmark in a pseudo checkbox.
$_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-padding);


.mat-pseudo-checkbox {
  width: $mat-checkbox-size;
  height: $mat-checkbox-size;
  border: $mat-checkbox-border-width solid;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  transition:
      border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function,
      background-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;

  // Used to render the checkmark/mixedmark inside of the box.
  &::after {
    position: absolute;
    opacity: 0;
    content: '';
    border-bottom: $mat-checkbox-border-width solid currentColor;
    transition: opacity $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
  }

  &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
    border: none;
  }
}

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

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

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