// ============================================================================
// :: Checbox
// ============================================================================
/**
 * This component is a representation of a checkbox. It looks visually
 * different from the default browser because it it styled for the brand.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-checkbox {
  position: relative;

  display: inline-flex;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-checkbox__container {
  display: flex;
  align-items: flex-start;

  cursor: pointer;

  word-break: break-word;

  &:hover > .a-checkbox__holder:before {
    opacity: 1;
  }
}

.a-checkbox__input {
  margin: 0;
  padding: 0;

  opacity: 0;
  outline: 0;
  -webkit-appearance: none;

  // Ensure visible keyboard focus by styling the visual holder
  &:focus {
    outline: 0.2rem solid $primary-color-base;
    outline-offset: 0.2rem;
  }

  &:checked ~ .a-checkbox__holder:before {
    opacity: 1;
    color: $text-color-white;
  }

  &:checked ~ .a-checkbox__holder {
    background-color: $primary-color-base;
  }

  &:disabled ~ .a-checkbox__holder:before,
  &:disabled ~ .a-checkbox__holder,
  &:disabled ~ .a-check__text {
    opacity: 1;
    background-color: $background-color-base;

    pointer-events: none;
  }

  &:disabled ~ .a-checkbox__holder:before {
    color: $text-color-disabled;
  }

  &:disabled ~ .a-checkbox__holder {
    border: $border-width-base solid $border-color-base;
  }
}

.a-checkbox__holder {
  @extend %__icon-checkmark;

  position: relative;

  display: inline-block;
  height: 2.4rem;
  width: 2.4rem;
  min-width: 2.4rem;
  margin-right: 1rem;

  border: $border-width-base solid $primary-color-base;
  border-radius: $border-radius-base;

  transition: background-color 0.2s ease-in-out;

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    display: block;
    width: 1.5rem;
    height: 1.5rem;

    opacity: 0;
    color: $primary-color-base;

    transition:
      opacity 0.2s ease-in-out,
      color 0.2s ease-in-out;
  }
}

// Also show focus when any child inside the container is focused
.a-checkbox__container:focus-within .a-checkbox__holder {
  outline: 0.2rem solid $primary-color-base;
  outline-offset: 0.2rem;
}

// ============================================================================
// :: Modifiers
// ============================================================================

// When text zoom is large, let the icon pseudo-element size naturally
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .a-checkbox__holder::before {
    width: auto;
    height: auto;
  }
}

// At 235% text zoom keep checkbox checkmark at the same visual size as 200%.
html[data-text-zoom="xlarge"] {
  .a-checkbox__holder::before {
    font-size: 0.8511em; // 2 / 2.35
  }
}