@mixin chip-input-container() { ... }@mixin chip-input-container() { 
  @include common.chip-container-styles;
 }

@mixin generate-styles() { ... }@mixin generate-styles() { 
  --kib-chip-input-border-width: #{border.get('ct', 'chip', 'border-width', 'standard')};
  --kib-chip-input-border-color: #{color.get(
      'ct',
      'chip',
      'input',
      $variant,
      'active',
      'border-color'
    )};

  @include common.chip-base-styles;

  border: 0;
  border-radius: border.get('ct', 'chip', 'border-radius', 'standard');
  background: color.get('ct', 'chip', 'input', $variant, 'active', 'bg-color');
  box-shadow: inset 0 0 0 var(--kib-chip-input-border-width) var(--kib-chip-input-border-color);
  color: color.get('ct', 'chip', 'input', $variant, 'active', 'text-color');

  &:hover {
    --kib-chip-input-border-color: #{color.get(
        'ct',
        'chip',
        'input',
        $variant,
        'hover',
        'border-color'
      )};
    background: color.get('ct', 'chip', 'input', $variant, 'hover', 'bg-color');
    color: color.get('ct', 'chip', 'input', $variant, 'hover', 'text-color');
  }

  &:focus-visible {
    --kib-chip-input-border-width: #{border.get('ct', 'chip', 'border-width', 'focused')};
    --kib-chip-input-border-color: #{color.get(
        'ct',
        'chip',
        'input',
        $variant,
        'focus',
        'border-color'
      )};
    outline: 0;
    background: color.get('ct', 'chip', 'input', $variant, 'focus', 'bg-color');
    color: color.get('ct', 'chip', 'input', $variant, 'focus', 'text-color');
  }

  &:active {
    --kib-chip-input-border-width: #{border.get('ct', 'chip', 'border-width', 'standard')};
    --kib-chip-input-border-color: #{color.get(
        'ct',
        'chip',
        'input',
        $variant,
        'pressed',
        'border-color'
      )};
    background: color.get('ct', 'chip', 'input', $variant, 'pressed', 'bg-color');
    color: color.get('ct', 'chip', 'input', $variant, 'pressed', 'text-color');
  }
 }

@mixin icon() { ... }@mixin icon() { 
  display: inline-block;
  width: unit.rem(16px);
  height: unit.rem(16px);
  fill: color.get('ct', 'chip', 'input', 'selected', 'active', 'icon-color');

  vertical-align: middle;

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

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

$chip-input-button-size: kib-core-dimensions-get(large) !default;

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

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

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

$chip-input-icon-spacing: spacing.get('s1');