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

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

  display: inline-flex;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-radio__container {
  display: flex;
  align-items: center;

  cursor: pointer;

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

.a-radio__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-radio__holder:before {
    opacity: 1;
    background-color: $background-color-white;
  }

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

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

    pointer-events: none;
  }

  &:disabled ~ .a-radio__holder:before {
    background-color: $background-color-disabled;
  }

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

.a-radio__holder {
  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-round;

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

  &::before {
    content: "";

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

    display: block;
    width: 0.6rem;
    height: 0.6rem;

    opacity: 0;
    background-color: $primary-color-base;
    border-radius: 100%;

    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-radio__container:focus-within .a-radio__holder {
  outline: 0.2rem solid $primary-color-base;
  outline-offset: 0.2rem;
}

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