@mixin chip-base-styles() { ... }@mixin chip-base-styles() { 
  @include kib-foundations.typography-style-as('utility-3');
  @include animation.apply('press', 'scale', 'standard');

  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: spacing.get('s2');
  width: 100%;
  padding: spacing.get('s2') spacing.get('s3');
  border-width: border.get('ct', 'chip', 'border-width', 'standard');
  border-radius: border.get('ct', 'chip', 'border-radius', 'standard');
  font-weight: typography.get-weight('utility-weight-strong');

  cursor: pointer;
 }

@mixin chip-container-styles() { ... }@mixin chip-container-styles() { 
  display: inline-block;
  vertical-align: middle;

  & + & {
    margin-left: spacing.get('s2');
  }
 }

@mixin chip-disabled-styles() { ... }@mixin chip-disabled-styles() { 
  opacity: 0.4;
  pointer-events: none;
 }

@mixin chip-icon-styles() { ... }@mixin chip-icon-styles() { 
  position: relative;
  width: unit.rem(18px);
  height: unit.rem(18px);
 }

@mixin chip-enabled-styles() { ... }@mixin chip-enabled-styles() { 
  background: map.get(variants.$styles, $type, '$chip-background');
  color: map.get(variants.$styles, $type, '$chip-text-color');

  &:active {
    background: settings.$chip-pressed-background;
    box-shadow: none;
  }

  &:hover {
    color: map.get(variants.$styles, $type, '$chip-text-color');
  }
 }

@mixin legacy-chip-base-styles($use-hover-elevation: true) { ... }@mixin legacy-chip-base-styles($use-hover-elevation: true) { 
  @include kib-foundations.typography-style-as('paragraph-1');
  display: inline-flex;
  position: relative;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: settings.$chip-height;
  transition: background-color 100ms ease-out;
  border: 0;
  border-radius: kib-core.dimensions-get('large');
  background: map.get(variants.$styles, $type, '$default-background');
  color: map.get(variants.$styles, $type, '$default-text-color');
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;

  &:focus {
    outline: none;

    @at-root a#{&} {
      text-decoration: underline;
    }
  }

  &::after {
    $distance: unit.rem(-2px);
    $radius: kib-core.dimensions-get('large');
    content: ' ';

    position: absolute;
    top: $distance;
    right: $distance;
    bottom: $distance;
    left: $distance;
    transition: opacity 100ms ease-out;
    border: none;
    border-radius: $radius + kib-core.dimensions-get(tiny);
    opacity: 0;
    box-shadow: 0 0 0 unit.rem(1px) map.get(variants.$styles, $type, '$chip-focus-border-color');
    pointer-events: none;
  }

  &:hover {
    @if $use-hover-elevation {
      @include elevation.apply('emphasis-primary');
    }

    border: none;
    background: map.get(variants.$styles, $type, '$hover-background');
    color: map.get(variants.$styles, $type, '$default-text-color');
  }

  &:active {
    background: map.get(variants.$styles, $type, '$pressed-background');
    box-shadow: none;
  }
 }

@mixin legacy-base-styles-adjacent() { ... }@mixin legacy-base-styles-adjacent() { 
  & + & {
    margin-left: spacing.get('s2');
  }
 }

@mixin legacy-chip-disabled-styles() { ... }@mixin legacy-chip-disabled-styles() { 
  opacity: map.get(variants.$styles, $type, '$chip-disabled-opacity');
  pointer-events: none;

  &:focus,
  &:active,
  &:hover {
    box-shadow: none;
    cursor: default;
  }

  &::after {
    box-shadow: none;
  }
 }

@mixin legacy-chip-focus-styles() { ... }@mixin legacy-chip-focus-styles() { 
  &::after {
    opacity: 1;
  }
 }

@mixin legacy-chip-active-hover-styles() { ... }@mixin legacy-chip-active-hover-styles() { 
  &::after {
    opacity: 0;
  }
 }

@mixin legacy-chip-icon-styles() { ... }@mixin legacy-chip-icon-styles() { 
  position: relative;
  width: settings.$chip-icon-size;
  height: settings.$chip-icon-size;
  color: map.get(variants.$styles, $type, '$chip-icon-color');

  > svg {
    display: inline-block;
    fill: map.get(variants.$styles, $type, '$chip-icon-color');
  }
 }

@mixin legacy-chip-content-spacing() { ... }@mixin legacy-chip-content-spacing() { 
  padding: {
    top: settings.$chip-spacing-vertical;
    right: settings.$chip-spacing-horizontal;
    bottom: settings.$chip-spacing-vertical;
    left: settings.$chip-spacing-horizontal;
  }
 }

@mixin chip-deselected-styles() { ... }@mixin chip-deselected-styles() { 
  border: kib-foundations.rem(1px) solid
    map.get(variants.$styles, $type, '$chip-deselected-border-color');
  background: map.get(variants.$styles, $type, '$chip-deselected-background');
  color: map.get(variants.$styles, $type, '$chip-deselected-text-color');

  &:hover {
    border: kib-foundations.rem(1px) solid
      map.get(variants.$styles, $type, '$chip-deselected-border-color');
    background: map.get(variants.$styles, $type, '$chip-deselected-hover-background');
    color: map.get(variants.$styles, $type, '$chip-deselected-text-color');
  }

  &:active {
    border: kib-foundations.rem(1px) solid
      map.get(variants.$styles, $type, '$chip-deselected-border-color');
    background: map.get(variants.$styles, $type, '$chip-deselected-active-background');
  }
 }

$default-background: color.get('chip', '01', 'bg-primary') !default;

$pressed-background: color.get('chip', '01', 'bg-high') !default;

$default-text-color: color.get('chip', '01', 'text') !default;

$chip-icon-color: color.get('chip', '03', 'text') !default;

$chip-text-color: color.get('chip', '03', 'text') !default;

$chip-background: color.get('chip', '03', 'bg-primary') !default;

$chip-pressed-background: color.get('chip', '03', 'bg-high') !default;

$chip-height: kib-core.dimensions-get(default) * 2.25 !default;

$chip-focus-border-color: color.get('chip', '03', 'text') !default;

$chip-disabled-opacity: 0.3 !default;

$chip-icon-size: kib-core.dimensions-get(default) * 1.25 !default;

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

$chip-spacing-horizontal: spacing.get('s3') !default;