.radio {
  position: relative;
  cursor: initial;
  display: flex;
  flex-direction: row;

  &--align-items-center {
    align-items: center;
  }

  &--align-items-top > &__dot-container {
    top: 4px;
  }

  &--disabled {
    cursor: default;
    pointer-events: none;
  }

  &--checked > &__label,
  &--checked > &__dot-container {
    cursor: default;
  }

  &__input {
    position: absolute;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    border: 0;
    height: 0;
    width: 0;
  }

  & > &__dot-container {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: var(--wds-radio-size, 16px);
    height: var(--wds-radio-size, 16px);
    border: 1px solid var(--wds-radio-border, var(--wds-color-border-standard-secondary-active, #116dff));
    background-color: var(--wds-radio-fill, var(--wds-color-fill-standard-tertiary, #ffffff));
    border-radius: var(--wds-radio-border-radius, var(--wds-border-radius-full, 50%));
    cursor: pointer;
  }

  @media (hover: hover) {
    &:not(&--checked):hover > &__dot-container {
      border-color: var(--wds-radio-border-hover, var(--wds-color-border-standard-secondary-active, #116dff));
      background-color: var(--wds-radio-fill-hover, var(--wds-color-fill-standard-tertiary-hover, #ffffff));
    }
  }

  &:not(&--checked)#{&}--disabled > &__dot-container {
    border-color: var(--wds-radio-border-disabled, var(--wds-color-border-standard-secondary-disabled, rgba(0, 6, 36, 0.3)));
    background-color: var(--wds-radio-fill-disabled, var(--wds-color-fill-standard-secondary-disabled, rgba(0, 6, 36, 0.05)));
  }

  &--checked > &__dot-container {
    border-color: var(--wds-radio-border-active, var(--wds-color-border-standard-secondary-active, #116dff));
    background-color: var(--wds-radio-fill-active-hover, var(--wds-color-fill-standard-tertiary, #ffffff));
  }

  &--checked#{&}--disabled > &__dot-container {
    border-color: var(--wds-radio-border-active-disabled, var(--wds-color-border-standard-secondary-disabled, rgba(0, 6, 36, 0.3)));
    background-color: var(--wds-radio-fill-active-disabled, var(--wds-color-fill-standard-secondary-disabled, rgba(0, 6, 36, 0.05)));
  }

  /* ring/band come from the shared wds-focus-ring class (forced from JS) */
  &__input:focus-visible ~ &__dot-container {
    border-color: var(--wds-radio-border, var(--wds-color-border-standard-secondary-active, #116dff));
  }

  @media (hover: hover) {
    &:not(&--checked) > &__dot-container:hover:not(:active) {
      border-color: var(--wds-radio-border-hover, var(--wds-color-border-standard-secondary-active, #116dff));
      background-color: var(--wds-radio-fill-hover, var(--wds-color-fill-standard-tertiary-hover, #d6e6fe));
    }
  }

  & > &__dot-container > &__dot {
    display: block;
    border-radius: var(--wds-radio-border-radius, var(--wds-border-radius-full, 50%));
    width: var(--wds-radio-dot-size, 10px);
    height: var(--wds-radio-dot-size, 10px);
    background-color: var(--wds-radio-dot-fill-active, var(--wds-color-fill-standard-primary, #116dff));
    transform: scale(0);
    opacity: 0;
  }

  &:active > &__dot-container > &__dot {
    background-color: var(--wds-radio-dot-fill-active, var(--wds-color-fill-standard-primary, #5999ff));
    transform: scale(1);
    opacity: 1;
  }

  &--checked > &__dot-container > &__dot {
    transform: scale(1);
    opacity: 1;
  }

  &--checked#{&}--disabled > &__dot-container > &__dot {
    background-color: var(--wds-radio-dot-fill-disabled, var(--wds-color-fill-standard-primary-disabled, rgba(0, 6, 36, 0.3)));
  }

  & > &__label {
    cursor: pointer;
    padding-inline-start: var(--wds-space-200, 12px);
    width: 100%;
  }

  &#{&}--size-small &__label &__label-text {
    font-size: var(--wds-radio-label-font-size-small, var(--wds-font-size-body-small, 14px));
    line-height: var(--wds-radio-label-font-line-height-small, var(--wds-font-line-height-body-small, 18px));
  }

  &#{&}--size-medium &__label &__label-text {
    font-size: var(--wds-radio-label-font-size-medium, var(--wds-font-size-body-medium, 16px));
    line-height: var(--wds-radio-label-font-line-height-medium, var(--wds-font-line-height-body-medium, 24px));
  }
}