.Polaris-Checkbox {
  position: relative;
}

.Polaris-Checkbox--error {
  // stylelint-disable-next-line selector-max-specificity
  .Polaris-Checkbox__Backdrop {
    @include control-backdrop(error);
  }

  .Polaris-Checkbox__Icon {
    @include recolor-icon(color('red', 'dark'));
  }

  .Polaris-Checkbox__Input:checked,
  .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate {
    ~ .Polaris-Checkbox__Icon {
      @include recolor-icon(white);
    }
    + .Polaris-Checkbox__Backdrop {
      @include control-backdrop(checked-error);
    }
  }

  // We need to know if the input is focusing to change the border color.
  // stylelint-disable-next-line selector-max-specificity
  .Polaris-Checkbox__Input:focus + .Polaris-Checkbox__Backdrop,
  .Polaris-Checkbox__Input:active + .Polaris-Checkbox__Backdrop {
    @include control-backdrop(focused-error);
  }
}

.Polaris-Checkbox__Input {
  @include visually-hidden;

  &:checked,
  &.Polaris-Checkbox__Input--indeterminate {
    // stylelint-disable-next-line selector-max-class
    + .Polaris-Checkbox__Backdrop {
      @include control-backdrop(checked);
    }
    ~ .Polaris-Checkbox__Icon {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  &:focus,
  &:active {
    + .Polaris-Checkbox__Backdrop {
      @include control-backdrop(focused);
    }
  }

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

    ~ .Polaris-Checkbox__Icon {
      @include recolor-icon(color('sky', 'lighter'));
    }
  }

  &:checked:disabled,
  &.Polaris-Checkbox__Input--indeterminate.Polaris-Checkbox--disabled {
    // stylelint-disable-next-line selector-max-class
    + .Polaris-Checkbox__Backdrop {
      @include control-backdrop(checked-disabled);
    }
  }
}

.Polaris-Checkbox__Backdrop {
  @include control-backdrop;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.Polaris-Checkbox__Icon {
  @include recolor-icon(color('white'));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  transition: control-icon-transition();

  @media (-ms-high-contrast: active) {
    fill: ms-high-contrast-color('text');
  }
}