$radio-size: $size-s;
$radio-spacing: $spacing-xs;
$radio-border-size: $border-xs;
$radio-border-color: $color-controlborder;
$radio-radius: $radius-rounded;

$radio-active-background: $color-primary;

$radio-icon-spacing: $spacing-xxxs;
$radio-icon-color: $color-controlborder;
$radio-icon-color--hover: $color-controlborder--hover;
$radio-icon-color--active: $color-controlborder--active;
$radio-active-icon-color: $color-primary-text;

$radio-label-color: $color-control;

$radio-group-spacing: $spacing-xxs;

.radio-group {
  .radio-container + .radio-container {
    margin-top: $radio-group-spacing;
  }
}

.radio-container {
  display: block;

  label {
    display: flex;
    align-items: center;
    &.reverse {
      flex-direction: row-reverse;
      justify-content: space-between;
      .radio {
        margin-right: 0;
        margin-left: $radio-spacing;
      }
    }
  }

  .radio {
    position: relative;
    width: $radio-size;
    height: $radio-size;
    margin-right: $radio-spacing;
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      &:checked~.radio-appearance {
        background: $radio-active-background;
        border: none;
        &:after {
          display: block;
          background: $radio-active-icon-color;
        }
      }
    }
    .radio-appearance {
      position: relative;
      width: $radio-size;
      height: $radio-size;
      border: $radio-border-size solid $radio-border-color;
      border-radius: $radio-radius;
      &:after {
        content: '';
        display: none;
        position: absolute;
        top: $radio-icon-spacing;
        left: $radio-icon-spacing;
        right: $radio-icon-spacing;
        bottom: $radio-icon-spacing;
        border-radius: $radio-radius;
        background: $radio-icon-color;
      }
    }
  }

  &:hover {
    .radio {
      .radio-appearance {
        border-color: $radio-icon-color--hover;
        &:after {
          display: block;
        }
      }
    }
  }
  &:active {
    .radio {
      .radio-appearance {
        border-color: $radio-icon-color--active;
      }
    }
  }

  .label {
    @include font-control-label();
    color: $radio-label-color;
  }
}