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

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

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

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

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

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