@if $css-variable-enabled {
  $radio-margin: var(--radio-margin);
  $radio-label-margin: var(--radio-label-margin);
  $radio-border-radius: var(--radio-border-radius);
  $radio-border-width: var(--radio-border-width);
  $radio-padding: var(--radio-padding);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}radio {
  display: inline-block;
  user-select: none;
  margin: $radio-margin;

  span {
    vertical-align: middle;

    ~ span {
      margin-left: $radio-label-margin;
    }
  }

  > input {
    display: inline-block;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;

    + span {
      display: inline-block;
      border-style: solid;
      border-color: var(--radio-border-color);
      position: relative;
      overflow: hidden;
      border-radius: $radio-border-radius;
      border-width: $radio-border-width;
      padding: $radio-padding;
      transition: $primary-transition;

      &:after {
        content: '';
        display: inline-block;
        padding: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100px;
        background-color: $transparent;
        transition: $primary-transition;
      }
    }

    &:checked + span {
      background-color: var(--radio-selected-color);
      border-color: $transparent;

      &:after {
        transform: translate(-50%, -50%) scale(0.6);
        background-color: #FFF;
      }
    }

    &:focus + span,
    &.#{$prefix}focused + span {
      box-shadow: 0 0 0 2px var(--radio-border-spread-color);
    }
  }

  &.#{$prefix}rect, &.#{$prefix}rectangle, &.#{$prefix}rectangular {
    > input + span {
      border-radius: 7px;

      &:after {
        border-radius: 4px;
      }
    }
  }

  @each $name, $color, $skip, $skip, $light-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} > input:checked + span {
        background-color: $color;
      }

      &.#{$prefix}#{$name} > input:focus + span,
      &.#{$prefix}#{$name} > input.#{$prefix}focused + span {
        box-shadow: 0 0 0 2px $light-color;
      }
    }
  }

  &[disabled] {
    pointer-events: none;

    span {
      color: var(--item-disabled-fg-color);
    }

    input + span {
      background-color: var(--item-disabled-bg-color);
      border-color: $transparent;
      box-shadow: 0 0 0 0 $transparent;

      &:after {
        background-color: var(--item-disabled-fg-color);
      }
    }
  }
}