.radio-group {
  $o: '#{&}__option-container';

  display: flex;

  /* `__radio` lands on the `Radio` root; Radio's own root rules touch none of
     these properties, so one class is enough */
  &__radio {
    width: 100%;
    padding: var(--wds-radio-group-item-padding-default-horizontal, var(--wds-space-0, 0))
      var(--wds-radio-group-item-padding-default-vertical, var(--wds-space-0, 0));
  }

  &__radio-container {
    display: flex;
    align-items: center;
  }

  &--orientation-vertical {
    flex-direction: column;
  }

  &--orientation-horizontal {
    flex-direction: row;
  }

  &--orientation-horizontal
    #{$o}--selection-area-always
    &__radio,
  &--orientation-horizontal
    #{$o}--selection-area-hover
    &__radio {
    margin-inline-end: 18px;
  }

  #{$o}--selection-area-always &__radio-container,
  #{$o}--selection-area-hover &__radio-container {
    padding: 2px;
  }

  &--orientation-horizontal#{&}--full-width #{$o} {
    display: grid;
  }

  &--orientation-horizontal#{&}--full-width
    #{$o}--selection-area-always
    &__radio,
  &--orientation-horizontal#{&}--full-width
    #{$o}--selection-area-hover
    &__radio {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  #{$o}--selection-area-always &__radio,
  #{$o}--selection-area-hover &__radio {
    cursor: pointer;
    padding-block-start: var(--wds-select-area-padding-vertical, var(--wds-space-200, 10px));
    padding-inline-end: var(--wds-select-area-padding-horizontal, var(--wds-space-300, 0px));
    padding-block-end: var(--wds-select-area-padding-vertical, var(--wds-space-200, 10px));
    padding-inline-start: var(--wds-select-area-padding-horizontal, var(--wds-space-300, 14px));
  }

  #{$o}--selection-area-always#{$o}--checked &__radio,
  #{$o}--selection-area-hover#{$o}--checked &__radio {
    cursor: default;
  }

  &--orientation-vertical#{&}--size-small
    :not(:first-child)#{$o}--selection-area-none {
    margin-block-start: var(--wds-radio-group-gap-vertical-small, var(--wds-space-100, 6px));
  }

  &--orientation-vertical#{&}--size-medium
    :not(:first-child)#{$o}--selection-area-none {
    margin-block-start: var(--wds-radio-group-gap-vertical-medium, var(--wds-space-200, 12px));
  }

  &--orientation-horizontal#{&}--size-small
    :not(:first-child)#{$o}--selection-area-none {
    margin-inline-start: var(--wds-radio-group-gap-horizontal-small, var(--wds-space-400, 20px));
  }

  &--orientation-horizontal#{&}--size-medium
    :not(:first-child)#{$o}--selection-area-none {
    margin-inline-start: var(--wds-radio-group-gap-horizontal-medium, var(--wds-space-400, 20px));
  }

  &--orientation-vertical#{&}--size-small
    :not(:first-child)#{$o}--selection-area-always,
  &--orientation-vertical#{&}--size-small
    :not(:first-child)#{$o}--selection-area-hover {
    margin-block-start: var(--wds-radio-group-gap-vertical-small, var(--wds-space-100, 6px));
  }

  &--orientation-vertical#{&}--size-medium
    :not(:first-child)#{$o}--selection-area-always,
  &--orientation-vertical#{&}--size-medium
    :not(:first-child)#{$o}--selection-area-hover {
    margin-block-start: var(--wds-radio-group-gap-vertical-medium, var(--wds-space-200, 6px));
  }

  &--orientation-horizontal:not(#{&}--full-width)
    :not(:first-child)#{$o}--selection-area-always,
  &--orientation-horizontal:not(#{&}--full-width)
    :not(:first-child)#{$o}--selection-area-hover {
    margin-inline-start: var(--wds-space-200, 6px);
  }

  #{$o}--selection-area-always &__radio-container,
  #{$o}--selection-area-hover &__radio-container {
    border-radius: var(--wds-select-area-border-radius, var(--wds-border-radius-400, 8px));
  }

  #{$o}--selection-area-always#{$o}--disabled &__radio-container,
  #{$o}--selection-area-hover#{$o}--disabled &__radio-container {
    cursor: initial;
    background-color: var(
      --wds-select-area-fill-disabled,
      var(--wds-color-white-transparent-0, transparent)
    );
  }

  #{$o}--selection-area-always#{$o}--selection-area-skin-outlined#{$o}--disabled
    &__radio-container {
    border: solid 1px
      var(
        --wds-color-border-standard-secondary-disabled,
        var(--wsr-color-D60, #DFE5EB)
      );
    padding: 1px;
  }

  #{$o}--selection-area-always#{$o}--selection-area-skin-filled#{$o}--checked:not(#{$o}--disabled)
    &__radio-container,
  #{$o}--selection-area-hover#{$o}--selection-area-skin-filled#{$o}--checked:not(#{$o}--disabled)
    &__radio-container {
    background-color: var(
      --wds-select-area-fill-active,
      var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE))
    );
  }

  #{$o}--selection-area-always#{$o}--selection-area-skin-outlined#{$o}--checked:not(#{$o}--disabled)
    &__radio-container,
  #{$o}--selection-area-hover#{$o}--selection-area-skin-outlined#{$o}--checked:not(#{$o}--disabled)
    &__radio-container {
    border: solid 2px
      var(
        --wds-color-border-standard-secondary-active,
        var(--wsr-color-B10, #116DFF)
      );
    padding: 0;
  }

  #{$o}--selection-area-always &__radio .radio__label,
  #{$o}--selection-area-hover &__radio .radio__label {
    padding-inline-start: var(--wds-space-200, 12px);
  }

  @media (hover: hover) {
    #{$o}--selection-area-always#{$o}--selection-area-skin-filled:not(#{$o}--checked):not(#{$o}--disabled):hover
      &__radio-container,
    #{$o}--selection-area-hover#{$o}--selection-area-skin-filled:not(#{$o}--checked):not(#{$o}--disabled):hover
      &__radio-container {
      background-color: var(
        --wds-select-area-fill-hover,
        var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))
      );
    }

    #{$o}--selection-area-always#{$o}--selection-area-skin-outlined:not(#{$o}--checked):not(#{$o}--disabled):hover
      &__radio-container,
    #{$o}--selection-area-hover#{$o}--selection-area-skin-outlined:not(#{$o}--checked):not(#{$o}--disabled):hover
      &__radio-container {
      border: solid 1px
        var(
          --wds-color-border-standard-secondary-hover,
          var(--wsr-color-B20, #5999FF)
        );
      padding: 1px;
    }
  }

  #{$o}--selection-area-always#{$o}--selection-area-skin-filled:not(#{$o}--disabled)
    &__radio-container {
    background-color: var(
      --wds-select-area-fill,
      var(--wds-color-blue-600, var(--wsr-color-B60, #F4F7FF))
    );
  }

  #{$o}--selection-area-always#{$o}--selection-area-skin-outlined:not(#{$o}--disabled)
    &__radio-container {
    border: solid 1px
      var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
    padding: 1px;
  }

  &__content {
    margin-block-start: 6px;
  }

  &--orientation-horizontal#{&}--full-width {
    display: grid;
    width: 100%;
  }
}