@mixin tag-variant($variant) { ... }@mixin tag-variant($variant) { 
  $styles: map.get(settings.$variant-states, $variant);

  --kib-tag-text-color: #{map.get($styles, 'color')};
  --kib-tag-background-color: #{map.get($styles, 'background-color')};
  --kib-tag-border-color: #{map.get($styles, 'background-color')};

  @if $variant == 'caution' or $variant == 'error' {
    @media (forced-colors: active) {
      border-width: settings.$border-width * 2;
      font-weight: bold;
    }
  }
 }

@mixin secondary() { ... }@mixin secondary() { 
  background-color: settings.$background-color-secondary;
  box-shadow: inset 0 0 0 var(--kib-tag-border-width, #{settings.$border-width})
    var(--kib-tag-border-color, #{settings.$border-color});

  &::after {
    --kib-tag-border-color: #{settings.$border-color};
  }
 }

@mixin secondary-variant($variant) { ... }@mixin secondary-variant($variant) { 
  $styles: map.get(settings.$variant-states, $variant);

  --kib-tag-border-color: #{map.get($styles, 'border-color')};
 }

@mixin icon() { ... }@mixin icon() { 
  display: inline-block;
  flex-shrink: 0;
  margin: settings.$icon-margin;
  width: settings.$icon-size;
  height: settings.$icon-size;
 }

@mixin button() { ... }@mixin button() { 
  border: none;
  cursor: pointer;

  // Custom outline when a button only shown on focus
  &::after {
    $distance: settings.$focus-border-distance;

    position: absolute;
    z-index: -1;
    top: $distance;
    left: $distance;
    right: $distance;
    bottom: $distance;
    border: settings.$border-width solid var(--kib-tag-border-color, settings.$background-color);
    border-radius: settings.$focus-border-radius;
    color: inherit;
    content: '';
    opacity: 0;
    transition: opacity settings.$focus-transition-duration ease-out;
  }
 }

@mixin button-hover() { ... }@mixin button-hover() { 
  --kib-tag-background-color: #{settings.$hover-background-color};
 }

@mixin button-focus() { ... }@mixin button-focus() { 
  outline: 0;

  &::after {
    opacity: 1;
  }
 }

@mixin button-variant() { ... }@mixin button-variant() { 
  --kib-tag-border-color: #{map.get(settings.$variant-states, $variant, 'background-color')};
 }

@mixin button-variant-hover() { ... }@mixin button-variant-hover() { 
  --kib-tag-background-color: #{map.get(
      settings.$variant-states,
      $variant,
      'hover-background-color'
    )};
 }

$text-color: color.get('message', 'info', '04') !default;

$background-color: color.get('message', 'info', '03') !default;

$hover-background-color: color.get('message', 'info', '06') !default;

$border-color: color.get('message', 'info', '02') !default;

$border-width: unit.rem(1px) !default;

$border-radius: unit.rem(3px) !default;

$padding: spacing.get(0, 's3') !default;

$focus-border-radius: unit.rem(4px) !default;

$icon-size: unit.rem(16px) !default;

$icon-margin: spacing.get(0, 0, 0, 's1') !default;

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

$focus-border-distance: unit.rem(-2px) !default;

$focus-border-radius: unit.rem(4px) !default;

$focus-transition-duration: 100ms !default;

$variant-states: (...);$variant-states: (
  'caution': (
    'color': color.get('message', 'warning', '04'),
    'background-color': color.get('message', 'warning', '03'),
    'border-color': color.get('message', 'warning', '02'),
    'hover-background-color': color.get('message', 'warning', '06')
  ),
  'error': (
    'color': color.get('message', 'error', '04'),
    'background-color': color.get('message', 'error', '03'),
    'border-color': color.get('message', 'error', '02'),
    'hover-background-color': color.get('message', 'error', '06')
  ),
  'neutral': (
    'color': color.get('message', 'neutral', '04'),
    'background-color': color.get('message', 'neutral', '03'),
    'border-color': color.get('message', 'neutral', '02'),
    'hover-background-color': color.get('message', 'neutral', '06')
  ),
  'success': (
    'color': color.get('message', 'success', '04'),
    'background-color': color.get('message', 'success', '03'),
    'border-color': color.get('message', 'success', '02'),
    'hover-background-color': color.get('message', 'success', '06')
  )
);