@import '../../styles/common';

.Checkbox {
  position: relative;
  margin: var(--p-choice-margin);
}

// stylelint-disable selector-max-specificity, selector-max-class
.Input {
  @include visually-hidden;

  &.keyFocused {
    + .Backdrop {
      @include focus-ring($style: 'focused');
    }
  }

  &:active:not(:disabled),
  &:checked,
  &.Input-indeterminate {
    + .Backdrop {
      @include control-backdrop(active);
    }

    ~ .Icon {
      transition: opacity var(--p-duration-150) var(--p-ease),
        transform var(--p-duration-150) var(--p-ease);
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }

  &:disabled {
    + .Backdrop {
      @include control-backdrop(disabled);
    }
  }

  &:disabled:checked {
    + .Backdrop {
      background: var(--p-border-disabled);

      &::before {
        background: var(--p-border-disabled);
      }
    }
  }
}
// stylelint-enable selector-max-specificity, selector-max-class

.Backdrop {
  @include control-backdrop;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  @include focus-ring($border-width: var(--p-control-border-width));
}

.Icon {
  @include recolor-icon(var(--p-icon-on-interactive));
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  pointer-events: none;

  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  transition: opacity var(--p-duration-100) var(--p-ease),
    transform var(--p-duration-100) var(--p-ease);

  @media (-ms-high-contrast: active) {
    fill: windowText;
  }
}

// stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators
.error {
  .Icon {
    @include recolor-icon(var(--p-icon-on-critical));
  }

  .Backdrop {
    @include control-backdrop(error);
  }

  .Input:checked,
  .Input:active,
  .Input.Input-indeterminate {
    + .Backdrop::before {
      background-color: var(--p-border-critical);
    }
  }
}
// stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators