@mixin root-container() { ... }@mixin root-container() { 
  display: inline-block;
  position: relative;
 }

@mixin field() { ... }@mixin field() { 
  @include kib-choice.choice-field;
 }

@mixin control-native() { ... }@mixin control-native() { 
  @include kib-choice.choice-control-native;

  width: 100%;
  height: 100%;
 }

@mixin control-custom($block) { ... }@mixin control-custom($block) { 
  --kib-visual-picker-background-color: transparent;
  @include kib-radio.radio-control-custom($block);

  display: none;
  position: absolute;
  z-index: 1;
  top: unit.rem(10px);
  left: unit.rem(10px);
  background-color: var(--kib-visual-picker-background-color);

  #{$block}__native:focus-visible ~ & {
    display: block;
  }

  #{$block}__native:not(:checked) ~ &,
  #{$block}__native:not(:focus-visible) ~ &::after,
  #{$block}__native:not(:focus-visible) ~ & {
    --kib-visual-picker-background-color: transparent;
  }

  #{$block}__native:focus-visible:checked ~ & {
    --kib-visual-picker-background-color: settings.$control-background-color;
  }

  #{$block}__native[type='checkbox'] ~ & {
    display: none;
  }

  #{$block}__native:disabled ~ & {
    display: none;
  }

  &,
  &::after {
    border-radius: 50%;
  }
 }

@mixin checkbox-control($block) { ... }@mixin checkbox-control($block) { 
  @include kib-checkbox.checkbox-control($block, $fill-element: 'fill-multi');

  position: absolute;
  z-index: 1;
  top: spacing.get('s2');
  left: spacing.get('s2');
 }

@mixin control-fill($block) { ... }@mixin control-fill($block) { 
  @include kib-radio.radio-fill($block);
  border-radius: 50%;

  background-color: transparent;

  // This fixes Safari bug that doesn't respect hidden overflow
  // while there's a transition inside an element with border radius.
  // @see https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
  /* stylelint-disable-next-line plugin/use-baseline -- Progressive enhancement: mask-image is non-critical, gracefully ignored in unsupported browsers */
  mask-image: radial-gradient(white, black);

  #{$block}__native:focus-visible ~ #{$block}__control & {
    background-color: color.get('action', 'selection-control', 'on', 'primary');
  }
 }

@mixin checkbox-fill($block) { ... }@mixin checkbox-fill($block) { 
  @include kib-checkbox.checkbox-fill($block, $control-element: 'control-multi');
 }

@mixin label-state($selection, $interaction) { ... }@mixin label-state($selection, $interaction) { 
  border: 0;
  border-radius: ct.get('visual-picker', 'border-radius');
  --kib-visual-picker-text-primary-color: #{color.get(
      'ct',
      'visual-picker',
      'available-yes',
      $selection,
      $interaction,
      'text-primary'
    )};
  --kib-visual-picker-text-secondary-color: #{color.get(
      'ct',
      'visual-picker',
      'available-yes',
      $selection,
      $interaction,
      'text-secondary'
    )};
  --kib-visual-picker-text-tertiary-color: #{color.get(
      'ct',
      'visual-picker',
      'available-yes',
      $selection,
      $interaction,
      'text-tertiary'
    )};

  background-color: color.get(
    'ct',
    'visual-picker',
    'available-yes',
    $selection,
    $interaction,
    'bg-color'
  );

  $border-shadow: inset 0 0 0 ct.get('visual-picker', 'border-width', $selection)
    color.get('ct', 'visual-picker', 'available-yes', $selection, $interaction, 'border-color');

  box-shadow: $border-shadow;

  @if $selection == 'selected' {
    box-shadow: $border-shadow,
      0
        0
        0
        ct.get('visual-picker', 'border-width', 'halo')
        color.get('ct', 'visual-picker', 'available-yes', $selection, $interaction, 'halo-color');
  }
 }

@mixin label($block) { ... }@mixin label($block) { 
  @include card.card;
  @include primary-text;

  padding: spacing.get('s4') spacing.get('s7');
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;

  $default-state: (
    'unselected': ':not(:disabled):not(:checked)',
    'selected': ':checked:not(:disabled)'
  );
  $focus-state: (
    'unselected': ':focus-visible:not(:disabled):not(:checked)',
    'selected': ':checked:focus-visible:not(:disabled)'
  );
  $disabled-state: (
    'unselected': ':disabled:not(:checked)',
    'selected': ':disabled:checked'
  );
  $invalid-state: (
    'unselected': ':not(:disabled):not(:checked)',
    'selected': ':checked:not(:disabled)'
  );

  @each $selection, $native-suffix in $default-state {
    #{$block}__native#{$native-suffix} ~ & {
      @include label-state($selection, 'active');
    }

    @media (hover: hover) and (pointer: fine) {
      #{$block}__field:hover:has(#{$block}__native#{$native-suffix}) & {
        @include label-state($selection, 'hover');
      }
    }
  }

  @each $selection, $native-suffix in $focus-state {
    #{$block}__native#{$native-suffix} ~ & {
      @include label-state($selection, 'focus');
    }
  }

  @each $selection, $native-suffix in $default-state {
    #{$block}__native:active#{$native-suffix} ~ &,
    #{$block}__field:active:has(#{$block}__native#{$native-suffix}) & {
      @include label-state($selection, 'pressed');
    }
  }

  @each $selection, $native-suffix in $disabled-state {
    #{$block}__native#{$native-suffix} ~ & {
      @include label-state($selection, 'disabled');
      opacity: 0.4;
      cursor: default;
    }
  }

  @each $selection, $native-suffix in $invalid-state {
    #{$block}__field--invalid:has(#{$block}__native#{$native-suffix}) & {
      @include label-state($selection, 'error');
    }
  }
 }

@mixin primary-text() { ... }@mixin primary-text() { 
  font-family: typography.get('text-typeface');
  font-size: typography.get('fs-product-text-1');
  font-weight: typography.get-weight('product-text-weight-strong');
  line-height: typography.get('lh-product-text-1');
  letter-spacing: typography.get('ls-standard');
  color: var(--kib-visual-picker-text-primary-color);
 }

@mixin primary() { ... }@mixin primary() { 
  @include primary-text;

  display: block;
 }

@mixin secondary() { ... }@mixin secondary() { 
  @include secondary-text;

  display: block;
  color: var(--kib-visual-picker-text-secondary-color);
 }

@mixin tertiary() { ... }@mixin tertiary() { 
  @include tertiary-text;

  display: block;
  color: var(--kib-visual-picker-text-tertiary-color);
 }