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

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

  width: 100%;
  height: 100%;
 }

@mixin control-custom($block) { ... }@mixin control-custom($block) { 
  @include kib-radio.radio-control-custom($block);

  --kib-visual-picker-background-color: transparent;

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

  #{$block}__native:not(:checked) ~ &,
  #{$block}__native:focus-visible ~ &::after,
  #{$block}__native:not(:focus-visible) ~ &::after,
  #{$block}__native:not(:focus-visible) ~ & {
    border: none;

    --kib-visual-picker-background-color: transparent;
  }

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

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

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

@mixin control-fill() { ... }@mixin control-fill() { 
  @include kib-radio.radio-control-fill;

  background-color: transparent;
  border-radius: 50%;

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

  // 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
  mask-image: radial-gradient(white, black);
 }

@mixin label() { ... }@mixin label() { 
  @include card.card;

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

  --kib-visual-picker-border-size: #{unit.rem(1px)};
  --kib-visual-picker-border-color: #{color.get('action', 'selection-control', 'off', 'primary')};
  --kib-visual-picker-background-color: transparent;

  background-color: var(--kib-visual-picker-background-color);
  border: 0;
  border-radius: border.get('br02');
  box-shadow: inset 0 0 0 var(--kib-visual-picker-border-size, #{unit.rem(1px)})
      var(
        --kib-visual-picker-border-color,
        #{color.get('action', 'selection-control', 'on', 'primary')}
      ),
    0 0 0 var(--kib-visual-picker-outline-width, 0)
      var(--kib-visual-picker-outline-color, #{color.get('action', 'cta', 'alternate', '02')});

  #{$block}__native:focus ~ &,
  #{$block}__native:focus-visible ~ & {
    --kib-visual-picker-outline-width: #{unit.rem(2px)};
  }

  #{$block}__native:checked ~ & {
    --kib-visual-picker-border-color: #{color.get('action', 'selection-control', 'on', 'primary')};
    --kib-visual-picker-border-size: #{unit.rem(2px)};
  }

  #{$block}__native:hover:not(:disabled) ~ & {
    --kib-visual-picker-background-color: #{color.get('action', 'cta', 'alternate', '03')};
  }

  #{$block}__native:active:not(:disabled) ~ & {
    --kib-visual-picker-border-color: #{color.get('action', 'selection-control', 'on', 'primary')};
    --kib-visual-picker-background-color: #{color.get('action', 'cta', 'alternate', '02')};
  }

  #{$block}__native:disabled ~ & {
    --kib-visual-picker-border-color: #{color.get('ui-bg', '02')};
    --kib-visual-picker-background-color: #{color.get('ui-bg', '02')};
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    display: block;
    border-radius: inherit;
    content: '';
  }
 }