@mixin choice-root() { ... }@mixin choice-root() { 
  margin-bottom: spacing.get('s4');
 }

@mixin choice-field() { ... }@mixin choice-field() { 
  position: relative;
  display: flex;
  align-items: center;
 }

@mixin choice-control-native($width, $height) { ... }@mixin choice-control-native($width, $height) { 
  position: absolute;
  margin: 0;
  width: $width;
  height: $height;
  appearance: none;
  cursor: pointer;
  opacity: 0;

  &:disabled {
    pointer-events: none;
  }
 }

@mixin choice-control-custom($block, $width, $height) { ... }@mixin choice-control-custom($block, $width, $height) { 
  position: relative;
  display: block;
  width: $width;
  height: $height;
  border: settings.$border-width solid settings.$border-color;
  border-radius: 50%;
  flex-shrink: 0;
  pointer-events: none;

  &::after {
    $distance: settings.$border-width * -3;

    position: absolute;
    top: $distance;
    left: $distance;
    right: $distance;
    bottom: $distance;
    border: settings.$border-width solid settings.$outline-color;
    border-radius: 50%;
    content: '';
    opacity: 0;
    transform: scale(0.75);
    transition-property: opacity, transform;
    transition-duration: 0.2s;
  }

  #{$block}__native:focus ~ & {
    border-color: settings.$border-color-focus;

    &::after {
      opacity: 1;
      transform: scale(1);
    }
  }

  #{$block}__native:checked ~ & {
    border-color: settings.$border-color-checked;
  }

  #{$block}__native:disabled ~ & {
    opacity: 0.5;
    pointer-events: none;
  }

  #{$block}__native:disabled:not(:checked) ~ & {
    background-color: settings.$disabled-background-color;
  }
 }

@mixin choice-label() { ... }@mixin choice-label() { 
  @include typography.style-as('paragraph-1');

  margin-left: settings.$label-spacing;
  color: settings.$label-text-color;
  cursor: pointer;

  #{$block}__native:disabled ~ & {
    color: settings.$label-text-color-disabled;
    pointer-events: none;
  }
 }

@mixin choice-append-container($width) { ... }@mixin choice-append-container($width) { 
  margin-top: spacing.get('s2');
  padding-left: calc(#{$width} + #{settings.$label-spacing});
 }

$brand: color.get('action', 'selection-control', 'on', 'primary') !default;

$brand-emphasis: color.get('action', 'selection-control', 'on', '02') !default;

$border-color: color.get('action', 'selection-control', 'off', 'primary') !default;

$border-color-focus: $brand !default;

$border-color-checked: $brand !default;

$border-width: unit.rem(1px) !default;

$disabled-background-color: color.get('ui-bg', '02') !default;

$outline-color: $brand !default;

$size: unit.rem(20px) !default;

$width: $size !default;

$height: $size !default;

$label-align: flex-start !default;

$label-spacing: spacing.get('s2') !default;

$label-text-color: inherit !default;

$label-text-color-disabled: color.get('text', 'tertiary') !default;