@mixin card-root() { ... }@mixin card-root() { 
  // NOTE: Set $hover-blur to 0 when removing elevation in experiment
  // 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;

  // Animation for pressed state
  @include animation.apply('press', 'scale', 'subtle');
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: stretch;
  width: 100%;

  // This fixes IE11 vertical alignment bug
  // @see https://chewyinc.atlassian.net/browse/CDS-4167
  min-height: settings.$min-height;
  margin-bottom: spacing.get('s2');

  padding: spacing.get('s4');

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

  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

  @include common.card-interactive-forced-colors($hover-not: '&--disabled');

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

  // 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')}
  );

  box-shadow: 0 0 0
      var(
        --kib-selection-card-border-width,
        #{ct.get('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, #{ct.get('selection-card', 'border-width', 'halo')})
      var(
        --kib-selection-card-halo-color,
        #{color.get('ct', 'selection-card', 'available-yes', 'unselected', 'active', 'halo-color')}
      );
  text-align: left;

  &:focus {
    --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'
      )};
    @include kib-foundations.card-interactive-hover;
  }

  &: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'
      )};
    @include kib-foundations.card-interactive-active;

    // 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')}
    );
  }

  @media (hover: hover) and (pointer: fine) {
    @media not (forced-colors: active) {
      &: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'
          )};
      }
    }
  }
 }

@mixin card-disabled() { ... }@mixin card-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'
    )};
  @include common.card-interactive-disabled-hcm;
 }

@mixin selected() { ... }@mixin selected() { 
  --kib-selection-card-border-width: #{ct.get('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-background-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'hover',
      'bg-color'
    )};
  --kib-selection-card-border-color: #{color.get(
      'ct',
      'selection-card',
      'available-yes',
      'selected',
      'hover',
      'border-color'
    )};

  --kib-selection-card-halo-width: #{ct.get('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: #{ct.get('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;
  content: '';

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

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

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

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

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

@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;

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

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