.radio {
  // &--animated#{&}--checked > &__dot-container > &__dot {
  //   animation: radio-dot-fill-in 150ms ease;
  // }
  //
  // &--animated:not(&--checked) > &__dot-container > &__dot {
  //   animation: radio-dot-fill-out 150ms ease;
  // }
  //
  // @keyframes radio-dot-fill-in {
  //   from {
  //     transform: scale(3.2);
  //     opacity: 1;
  //   }
  // }
  //
  // @keyframes radio-dot-fill-out {
  //   from {
  //     transform: scale(1);
  //     opacity: 1;
  //   }
  //
  //   to {
  //     transform: scale(3.2);
  //     opacity: 1;
  //   }
  // }
  //
  // @media (prefers-reduced-motion: reduce) {
  //   &--animated#{&}--checked > &__dot-container > &__dot,
  //   &--animated:not(&--checked) > &__dot-container > &__dot {
  //     animation: none;
  //   }
  // }

  & > &__dot-container {
    overflow: hidden;
    min-width: var(--wds-radio-size, var(--wds-space-350));
    height: var(--wds-radio-size, var(--wds-space-350));
    border-color: var(--wds-radio-border, var(--wds-color-black-200));
  }

  @media (hover: hover) {
    &:not(&--checked):hover > &__dot-container {
      border-color: var(--wds-radio-border-hover, var(--wds-color-fill-standard-primary));
      background-color: var(--wds-radio-fill-hover, var(--wds-color-blue-600));
    }
  }

  &:not(&--checked)#{&}--disabled > &__dot-container {
    border-color: var(--wds-radio-border-disabled, var(--wds-color-border-transparent-primary));
  }

  &--checked > &__dot-container {
    border-color: var(--wds-radio-border-active, var(--wds-color-fill-standard-primary));
    background-color: var(--wds-radio-fill-active-hover, var(--wds-color-fill-standard-primary));
  }

  &--checked#{&}--disabled > &__dot-container {
    border-color: var(--wds-radio-border-active-disabled, var(--wds-color-black-100-transparent-0));
    background-color: var(--wds-radio-fill-active-disabled, var(--wds-color-fill-dark-secondary-active));
  }

  &__input:focus-visible ~ &__dot-container {
    border-color: var(--wds-radio-border, var(--wds-color-black-200));
  }

  @media (hover: hover) {
    &:not(&--checked) > &__dot-container:hover:not(:active) {
      border-color: var(--wds-radio-border-hover, var(--wds-color-fill-standard-primary));
      background-color: var(--wds-radio-fill-hover, var(--wds-color-blue-600));
    }
  }

  & > &__dot-container > &__dot {
    width: var(--wds-radio-dot-size, 4px);
    height: var(--wds-radio-dot-size, 4px);
    background-color: var(--wds-radio-dot-fill-active, var(--wds-color-fill-standard-tertiary));
  }

  &:active > &__dot-container > &__dot {
    background-color: var(--wds-radio-dot-fill-active, var(--wds-color-fill-standard-tertiary));
  }

  &--checked#{&}--disabled > &__dot-container > &__dot {
    background-color: var(--wds-radio-dot-fill-disabled, var(--wds-color-fill-standard-tertiary-readonly));
  }

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

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