@mixin card-root() { ... }@mixin card-root() { 
  // NOTE: Set $hover-blur to 0 when removing elevation in experiement
  // These two variables are used to override the default box shadow from kib-foundations.card-interactive-hover
  // where we don't have tokens to control because we might not need them in the future after the experiment.
  // default state e.g. --kib-selection-card-box-shadow-blur: 0;
  // hover state e.g. --kib-selection-card-hover-box-shadow-blur: 0;

  @include kib-foundations.card;
  @include kib-foundations.card-interactive-default;

  transition: border-color 0.1s ease-in, background-color 0.1s ease-in, box-shadow 0.1s ease-in;

  border: none; //Override the border from kib-foundations.card-interactive-default

  // Selection Card component token experiment overrides the kib-foundation.card style
  background-color: var(
    --kib-selection-card-background-color,
    #{color.get('ct', 'selection-card', 'available-yes', 'unselected', 'active', 'bg-color')}
  );

  border-radius: var(
    --kib-selection-card-border-radius,
    #{border.get('ct', 'selection-card', 'border-radius')}
  );

  box-shadow: 0 0 0
      var(
        --kib-selection-card-border-width,
        #{border.get('ct', 'selection-card', 'border-width', 'unselected')}
      )
      var(
        --kib-selection-card-border-color,
        #{color.get('ct', 'selection-card', 'available-yes', 'unselected', 'active', 'border-color')}
      )
      inset,
    0 0 var(--kib-selection-card-box-shadow-blur, 0)
      var(
        --kib-selection-card-halo-width,
        #{border.get('ct', 'selection-card', 'border-width', 'halo')}
      )
      var(
        --kib-selection-card-halo-color,
        #{color.get('ct', 'selection-card', 'available-yes', 'unselected', 'active', 'halo-color')}
      );

  padding: spacing.get('s4');
  margin-bottom: spacing.get('s2');
  display: flex;
  flex-direction: column;
  width: 100%;

  // This fixes IE11 vertical alignment bug
  // @see https://chewyinc.atlassian.net/browse/CDS-4167
  min-height: settings.$min-height;
  align-items: top;
  justify-content: stretch;

  &:focus {
    @include kib-foundations.card-interactive-hover;
    --kib-selection-card-background-color: #{color.get(
        'ct',
        'selection-card',
        'available-yes',
        'unselected',
        'focus',
        'bg-color'
      )};
    --kib-selection-card-border-color: #{color.get(
        'ct',
        'selection-card',
        'available-yes',
        'unselected',
        'focus',
        'border-color'
      )};
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @include kib-foundations.card-interactive-hover;
      --kib-selection-card-background-color: #{color.get(
          'ct',
          'selection-card',
          'available-yes',
          'unselected',
          'hover',
          'bg-color'
        )};
      --kib-selection-card-border-color: #{color.get(
          'ct',
          'selection-card',
          'available-yes',
          'unselected',
          'hover',
          'border-color'
        )};

      // Need this repeated to override the default box shadow from kib-foundations.card-interactive-hover
      box-shadow: 0 0 0
          var(
            --kib-selection-card-border-width,
            #{border.get('ct', 'selection-card', 'border-width', 'unselected')}
          )
          var(
            --kib-selection-card-border-color,
            #{color.get(
                'ct',
                'selection-card',
                'available-yes',
                'unselected',
                'hover',
                'border-color'
              )}
          )
          inset,
        0 0 var(--kib-selection-card-hover-box-shadow-blur, #{settings.$hover-blur})
          var(
            --kib-selection-card-halo-width,
            #{border.get('ct', 'selection-card', 'border-width', 'halo')}
          )
          var(
            --kib-selection-card-halo-color,
            #{color.get(
                'ct',
                'selection-card',
                'available-yes',
                'unselected',
                'hover',
                'halo-color'
              )}
          );
    }
  }

  &:active {
    @include kib-foundations.card-interactive-active;
    --kib-selection-card-background-color: #{color.get(
        'ct',
        'selection-card',
        'available-yes',
        'unselected',
        'pressed',
        'bg-color'
      )};
    --kib-selection-card-border-color: #{color.get(
        'ct',
        'selection-card',
        'available-yes',
        'unselected',
        'pressed',
        'border-color'
      )};

    // Selection Card component token experiment overrides the kib-foundationcard.card-interative-active style
    // Just passing custom property wasn't enough, need to redeclare the background-color
    background-color: var(
      --kib-selection-card-background-color,
      #{color.get('ct', 'selection-card', 'available-yes', 'unselected', 'pressed', 'bg-color')}
    );
  }

  // This fixes IE11 not showing custom focus outline
  // @see https://chewyinc.atlassian.net/browse/CDS-4168
  overflow: visible;
  text-align: left;

  // Animation for pressed state
  @include animation.apply('press', 'scale', 'subtle');
 }

@mixin card-disabled() { ... }@mixin card-disabled() { 
  @include kib-foundations.card-interactive-disabled;
  --kib-selection-card-border-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'unselected',
      'disabled',
      'border-color'
    )};
  --kib-selection-card-background-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'unselected',
      'disabled',
      'bg-color'
    )};

  @media (forced-colors: active) {
    opacity: 1;
  }
  @include disabled-border-hcm;
 }

@mixin selected() { ... }@mixin selected() { 
  --kib-selection-card-border-width: #{border.get(
      'ct',
      'selection-card',
      'border-width',
      'selected'
    )};
  --kib-selection-card-background-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'active',
      'bg-color'
    )};
  --kib-selection-card-halo-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'active',
      'halo-color'
    )};
  --kib-selection-card-border-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'active',
      'border-color'
    )};

  @media (forced-colors: active) {
    border-color: Highlight;
  }
 }

@mixin selected-hover() { ... }@mixin selected-hover() { 
  --kib-selection-card-border-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'hover',
      'border-color'
    )};

  --kib-selection-card-halo-width: #{border.get('ct', 'selection-card', 'border-width', 'halo')};
  --kib-selection-card-halo-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'hover',
      'halo-color'
    )};
 }

@mixin selected-pressed() { ... }@mixin selected-pressed() { 
  --kib-selection-card-border-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'pressed',
      'border-color'
    )};

  --kib-selection-card-halo-width: #{border.get('ct', 'selection-card', 'border-width', 'halo')};
  --kib-selection-card-halo-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'pressed',
      'halo-color'
    )};
  --kib-selection-card-background-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'pressed',
      'bg-color'
    )};
 }

@mixin label() { ... }@mixin label() { 
  @include section-heading.heading;
  @include section-heading.heading-small;

  padding-left: settings.$label-spacing;

  @media (forced-colors: active) {
    #{$block}__native:disabled ~ & {
      color: GrayText;
    }
  }
 }

@mixin unselected-label() { ... }@mixin unselected-label() { 
  $distance: kib-foundations.$card-border-width * -3;

  position: absolute;
  top: $distance;
  left: $distance;
  right: $distance;
  bottom: $distance;
  border: none;
  content: '';
  cursor: pointer;
  z-index: 1;
 }

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

  #{$block}__native:checked ~ & {
    #{$block}__fill {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    @media (forced-colors: active) {
      border-color: Highlight;
    }
  }
  #{$block}__native:checked:disabled ~ & {
    #{$block}__fill {
      @media (forced-colors: active) {
        background-color: GrayText;
      }
    }
    @include disabled-border-hcm;
  }
 }

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

@mixin radio-control-fill() { ... }@mixin radio-control-fill() { 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  background-color: settings.$control-fill-color;
  border-radius: 50%;
  content: '';
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s, opacity 0.2s;

  @media (forced-colors: active) {
    background-color: Highlight;
  }
 }

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

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

@mixin append-container-checked() { ... }@mixin append-container-checked() { 
  z-index: 1;
 }

$appended-indent: kib-foundations.rem(20px) !default;

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

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

$min-height: kib-foundations.rem(52px) !default;

$hover-blur: map.get(elevation-settings.$levels, 'medium', 'blur-radius');