//-----------------------------
// Radio
//-----------------------------

@import '../../globals/scss/vars';
@import '../../globals/scss/colors';
@import '../../globals/scss/typography';
@import '../../globals/scss/spacing';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/import-once';
@import '../form/form';
@import '../../globals/scss/css--reset';

@include exports('radio-button') {
  .#{$prefix}--radio-button-group {
    display: flex;
    align-items: center;
    margin-top: $spacing-xs;
  }

  .#{$prefix}--radio-button {
    @include hidden;
  }

  .#{$prefix}--radio-button__label {
    @include typescale('zeta');
    @include font-family;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: $spacing-md;
  }

  .#{$prefix}--radio-button__appearance {
    @include reset;
    background-color: $inverse-01;
    border-radius: 50%;
    border: $radio-border-width solid $ui-05;
    flex-shrink: 0;
    height: rem(18px);
    width: rem(18px);
    margin-right: $spacing-xs;
  }

  .#{$prefix}--radio-button:checked + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: $brand-01;

    &:before {
      content: '';
      display: inline-block;
      position: relative;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: $brand-01;
    }
  }

  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .#{$prefix}--radio-button:focus + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
    @include focus-outline('blurred');
  }
}