/*
  sizes: .a-radio-button--sm (large default)
*/

.a-radio-button {
  --bg: transparent;
  --color: var(--lens-semantic-color-action-form-indicator);
  --border-color: var(--lens-semantic-color-action-form-outline);
  --border-radius: var(--lens-semantic-radius-full);
  --width: var(--lens-core-spacing-3);
  --height: var(--lens-core-spacing-3);
  --indicator-size: var(--lens-core-spacing-1);
  --indicator-radius: var(--lens-semantic-radius-full);
  appearance: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--a-radio-button-width, var(--width));
  height: var(--a-radio-button-height, var(--height));
  border: 1.4px solid var(--a-radio-button-border-color, var(--border-color));
  background: var(--a-radio-button-bg, var(--bg));
  transition-property: background, border-color;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  border-radius: var(--a-radio-button-border-radius, var(--border-radius));
  &::after {
    display: block;
    visibility: hidden;
    background: var(--a-radio-button-color, var(--color));
    content: "";
    width: var(--a-radio-button-indicator-size, var(--indicator-size));
    height: var(--a-radio-button-indicator-size, var(--indicator-size));
    border-radius: var(--a-radio-button-indicator-radius, var(--indicator-radius));
    pointer-events: none;
  }
  &:not([disabled]) {
    cursor: pointer;
    &:hover {
      --bg: var(--lens-semantic-color-action-form-hover);
      --border-color: var(--lens-semantic-color-action-form-outline);
    }
    &:active {
      --bg: var(--lens-semantic-color-action-form-active);
      --border-color: var(--lens-semantic-color-outline-active);
    }
    &:focus-visible {
      outline: var(--lens-semantic-border-width-focus-width) solid
        var(--lens-semantic-color-ui-focus-ring);
      outline-offset: var(--lens-semantic-border-width-focus-offset);
    }
  }
  &[disabled] {
    --border-color: var(--lens-semantic-color-action-form-outline-disabled);
    --color: var(--lens-semantic-color-action-form-indicator-disabled);
    cursor: not-allowed;
    &:checked {
      --bg: var(--lens-semantic-color-action-form-disabled-selected);
    }
  }
  &:checked,
  &.a-radio-button--checked {
    &::after {
      visibility: visible;
    }
    &:not([disabled]) {
      --bg: var(--lens-semantic-color-action-form-default-selected);
      --border-color: var(--lens-semantic-color-action-form-outline-selected);
      &:hover {
        --bg: var(--lens-semantic-color-action-form-hover-selected);
        --border-color: var(--lens-semantic-color-action-form-outline-hover-selected);
      }
      &:active {
        --bg: var(--lens-semantic-color-action-form-active-selected);
        --border-color: var(--lens-semantic-color-action-form-outline-press-selected);
      }
    }
  }
  &.a-radio-button--sm {
    --width: var(--lens-core-spacing-2);
    --height: var(--lens-core-spacing-2);
    --indicator-size: var(--lens-core-spacing-0-5);
  }
}

.a-radio-button-label {
  font-size: var(--a-radio-button-label-font-size, var(--lens-semantic-font-text-md-font-size));
  font-weight: var(
    --a-radio-button-label-font-weight,
    var(--lens-semantic-font-text-md-font-weight)
  );
  line-height: var(
    --a-radio-button-label-line-height,
    var(--lens-semantic-font-text-md-line-height)
  );
  letter-spacing: var(
    --a-radio-button-label-letter-spacing,
    var(--lens-semantic-font-text-md-letter-spacing)
  );
  color: var(--a-radio-button-label-color, var(--lens-semantic-color-type-default));
  cursor: pointer;
  transition: color var(--a-transition-duration) var(--a-transition-easing);
  &:has(> .a-radio-button) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lens-core-spacing-1-5);
  }
  &:has(> .a-radio-button[disabled]) {
    cursor: not-allowed;
    color: var(--lens-semantic-color-type-disabled);
  }
  &:has(> .a-radio-button--sm) {
    font-size: var(--lens-semantic-font-text-sm-font-size);
    font-weight: var(--lens-semantic-font-text-sm-font-weight);
    line-height: var(--lens-semantic-font-text-sm-line-height);
    letter-spacing: var(--lens-semantic-font-text-sm-letter-spacing);
    gap: var(--lens-semantic-spacing-desktop-gap-0-5);
  }
}