@use 'sass:math';
@use '../../style/checkbox-common';
@use '../../style/private';
@use '../../style/variables';
@use '../../tokens/token-utils';
@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
@use './pseudo-checkbox-common';

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

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

  @include private.private-animation-noop {
    &::after {
      transition: none;
    }
  }
}

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

.mat-pseudo-checkbox-indeterminate::after {
  left: math.div(checkbox-common.$border-width, 2);
  opacity: 1;
  border-radius: 2px;
}

.mat-pseudo-checkbox-checked::after {
  left: pseudo-checkbox-common.$padding - checkbox-common.$border-width * 1.5;
  border-left: checkbox-common.$border-width solid currentColor;
  transform: rotate(-45deg);
  opacity: 1;
  box-sizing: content-box;
}

.mat-pseudo-checkbox-minimal {
  @include token-utils.use-tokens(tokens-mat-minimal-pseudo-checkbox.$prefix,
    tokens-mat-minimal-pseudo-checkbox.get-token-slots()) {
    &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
      &::after {
        @include token-utils.create-token-slot(color, selected-checkmark-color);
      }

      &.mat-pseudo-checkbox-disabled::after {
        @include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
      }
    }
  }
}

.mat-pseudo-checkbox-full {
  @include token-utils.use-tokens(tokens-mat-full-pseudo-checkbox.$prefix,
    tokens-mat-full-pseudo-checkbox.get-token-slots()) {
    @include token-utils.create-token-slot(border-color, unselected-icon-color);
    border-width: checkbox-common.$border-width;
    border-style: solid;

    &.mat-pseudo-checkbox-disabled {
      @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
    }

    &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
      @include token-utils.create-token-slot(background-color, selected-icon-color);
      border-color: transparent;

      &::after {
        @include token-utils.create-token-slot(color, selected-checkmark-color);
      }

      &.mat-pseudo-checkbox-disabled {
        @include token-utils.create-token-slot(background-color, disabled-selected-icon-color);

        &::after {
          @include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
        }
      }
    }
  }
}

@include pseudo-checkbox-common.size(checkbox-common.$size);