@mixin root() { ... }@mixin root() { 
  --kib-button-text-color: #{color.get('action', 'cta', 'primary', 'text')};
  --kib-button-background: #{color.get('action', 'cta', 'primary', 'primary')};
  --kib-button-focus-border-color: #{color.get('action', 'cta', 'primary', 'primary')};
  --kib-button-box-shadow-color: none;
 }

@mixin base() { ... }@mixin base() { 
  @include typography.style-as('button');
  @include text;

  &:visited {
    @include text;
  }

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border-radius: settings.$border-radius;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(0);
  user-select: none;
  border: 0;
  background-color: var(--kib-button-background);
 }

@mixin text() { ... }@mixin text() { 
  color: var(--kib-button-text-color);
  text-decoration: none;
 }

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

@mixin focus() { ... }@mixin focus() { 
  // Custom outline around button shown on focus
  &::after {
    $distance: settings.$focus-border-distance;

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

  &:focus {
    outline: 0;

    &::after {
      opacity: 1;
    }
  }
 }

@mixin disabled() { ... }@mixin disabled() { 
  opacity: settings.$disabled-opacity;
  pointer-events: none;
 }

@mixin default-button-styles() { ... }@mixin default-button-styles() { 
  box-shadow: inset 0 0 0 #{settings.$focus-border-radius-length} var(--kib-button-box-shadow-color);

  &:hover {
    --kib-button-background: #{color.get('action', 'cta', 'primary', '03')};
  }

  &:active,
  &--loading {
    --kib-button-background: #{color.get('action', 'cta', 'primary', '02')};
  }
 }

@mixin button-new() { ... }@mixin button-new() { 
  @include root;
  @include base;
  @include text;
  @include size-large;
  @include default-button-styles;
  @include siblings;

  &:hover,
  &:active,
  &--loading {
    @include text;
  }

  &:disabled,
  &--loading {
    @include disabled;
  }

  @include focus;
 }

@mixin button-styles($theme, $emphasis: primary) { ... }@mixin button-styles($theme, $emphasis: primary) { 
  --kib-button-box-shadow-color: #{map.get(
      settings.$theme-emphasis-states,
      $theme,
      $emphasis,
      'border-color'
    )};
  --kib-button-focus-border-color: #{map.get(
      settings.$theme-emphasis-states,
      $theme,
      'focus-border-color'
    )};
  --kib-button-background: #{map.get(
      settings.$theme-emphasis-states,
      $theme,
      $emphasis,
      'background'
    )};
  --kib-button-text-color: #{map.get(
      settings.$theme-emphasis-states,
      $theme,
      $emphasis,
      'text-color'
    )};

  &:hover {
    --kib-button-text-color: #{map.get(
        settings.$theme-emphasis-states,
        $theme,
        $emphasis,
        'text-color'
      )};
    --kib-button-background: #{map.get(
        settings.$theme-emphasis-states,
        $theme,
        $emphasis,
        'hover-color'
      )};

    @if $emphasis == 'tertiary' {
      box-shadow: none;
    }
  }

  // loading must match pressed styles
  &:active,
  &--loading {
    --kib-button-background: #{map.get(
        settings.$theme-emphasis-states,
        $theme,
        $emphasis,
        'press-color'
      )};

    @if $emphasis == 'tertiary' {
      box-shadow: none;
    }
  }

  &--loading {
    opacity: settings.$disabled-opacity;
  }
 }

@mixin size-large() { ... }@mixin size-large() { 
  padding-left: settings.$large-padding;
  padding-right: settings.$large-padding;
  height: settings.$default-height;
 }

@mixin size-medium() { ... }@mixin size-medium() { 
  padding-left: spacing.get('s5');
  padding-right: spacing.get('s5');
  height: settings.$button-size-medium;
 }

@mixin size-small() { ... }@mixin size-small() { 
  padding-left: spacing.get('s3');
  padding-right: spacing.get('s3');
  height: settings.$button-size-small;
  font-weight: 500;
 }

@mixin icon() { ... }@mixin icon() { 
  margin-right: spacing.get('s2');
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  width: settings.$default-icon-size;
  height: settings.$default-icon-size;

  > svg {
    fill: currentColor;
  }

  > :only-child {
    width: inherit;
    height: inherit;
    vertical-align: unset;
  }
 }

@mixin icon-size-large() { ... }@mixin icon-size-large() { 
  width: settings.$icon-size-large;
  height: settings.$icon-size-large;
 }

@mixin icon-size-medium() { ... }@mixin icon-size-medium() { 
  width: settings.$icon-size-medium;
  height: settings.$icon-size-medium;
 }

@mixin icon-size-small() { ... }@mixin icon-size-small() { 
  width: settings.$icon-size-small;
  height: settings.$icon-size-small;
 }

@mixin icon-position-end() { ... }@mixin icon-position-end() { 
  margin-left: spacing.get('s2');
  margin-right: 0;
 }

@mixin icon-only() { ... }@mixin icon-only() { 
  margin: 0;
 }

@mixin button-padding() { ... }@mixin button-padding() { 
  padding: map.get(settings.$icon-only-padding-sizes, $size);
 }

@mixin visually-hidden() { ... }@mixin visually-hidden() { 
  @include kib-core.visually-hidden;
 }

@mixin button-appended() { ... }@mixin button-appended() { 
  margin: 0;
  height: auto;
  border-radius: 0 settings.$appended-border-radius settings.$appended-border-radius 0;
  box-shadow: inset 0 0 0 settings.$appended-box-shadow-width var(--kib-button-box-shadow-color);

  &::after {
    border-radius: 0 settings.$appended-focus-border-radius settings.$appended-focus-border-radius 0;
  }
 }

@mixin generate-styles($theme, $emphasis, $size, $icon-only) { ... }@mixin generate-styles($theme, $emphasis, $size, $icon-only) { 
  @include button-new;
  @include button-styles($theme, $emphasis);

  @if $size == 'medium' {
    @include size-medium;
  } @else if $size == 'small' {
    @include size-small;
  }

  @if $icon-only {
    @include button-padding($size);

    > svg {
      @if $size == 'large' {
        @include icon-size-large;
      } @else if $size == 'medium' {
        @include icon-size-medium;
      } @else if $size == 'small' {
        @include icon-size-small;
      }
    }
  }
 }

$default-height: kib-core.dimensions-get(huger) !default;

$default-icon-size: kib-core.dimensions-get(large) !default;

$disabled-opacity: 0.5 !default;

$icon-only-padding: spacing.get('s3') !default;

$border-radius: kib-core.dimensions-get(large) !default;

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

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

$focus-border-radius: $border-radius + kib-core.dimensions-get('tiny') !default;

$button-size-medium: kib-core.dimensions-get(huge) !default;

$button-size-small: kib-core.dimensions-get(large) + kib-core.dimensions-get(small) !default;

$icon-size-large: $default-icon-size !default;

$icon-size-medium: kib-core.dimensions-get(default) + kib-core.dimensions-get(tiny) !default;

$icon-size-small: kib-core.dimensions-get(default) !default;

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

$icon-only-padding-sizes: (...) !default;$icon-only-padding-sizes: (
  'large': spacing.get('s3'),
  'medium': unit.rem(10px),
  'small': spacing.get('s2')
) !default;

$appended-border-radius: kib-core.dimensions-get(small) !default;

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

$appended-box-shadow-width: unit.rem(1px) !default;

$theme-emphasis-states: (...) !default;$theme-emphasis-states: (
  'action': (
    'primary': (
      'background': color.get('action', 'cta', 'primary', 'primary'),
      'text-color': color.get('action', 'cta', 'primary', 'text'),
      'border-color': color.get('action', 'cta', 'primary', 'primary'),
      'hover-color': color.get('action', 'cta', 'primary', '03'),
      'press-color': color.get('action', 'cta', 'primary', '02')
    ),
    'secondary': (
      'background': color.get('action', 'cta', 'alternate', 'primary'),
      'text-color': color.get('action', 'cta', 'alternate', 'text'),
      'border-color': color.get('action', 'cta', 'alternate', 'text'),
      'hover-color': color.get('action', 'cta', 'alternate', '03'),
      'press-color': color.get('action', 'cta', 'alternate', '02')
    ),
    'tertiary': (
      'background': color.get('action', 'cta', 'alternate', 'primary'),
      'text-color': color.get('action', 'cta', 'alternate', 'text'),
      'border-color': color.get('action', 'cta', 'alternate', '03'),
      'hover-color': color.get('action', 'cta', 'alternate', '03'),
      'press-color': color.get('action', 'cta', 'alternate', '02')
    ),
    'focus-border-color': color.get('action', 'cta', 'primary', 'primary')
  ),
  'utility': (
    'primary': (
      'background': color.get('action', 'utility', 'primary', 'primary'),
      'text-color': color.get('action', 'utility', 'primary', 'text'),
      'hover-color': color.get('action', 'utility', 'primary', '03'),
      'press-color': color.get('action', 'utility', 'primary', '02'),
      'border-color': none
    ),
    'secondary': (
      'background': color.get('action', 'utility', 'alternate', 'primary'),
      'text-color': color.get('action', 'utility', 'alternate', 'text'),
      'border-color': color.get('action', 'utility', 'alternate', 'text'),
      'hover-color': color.get('action', 'utility', 'alternate', '03'),
      'press-color': color.get('action', 'utility', 'alternate', '02')
    ),
    'tertiary': (
      'background': color.get('action', 'utility', 'alternate', 'primary'),
      'text-color': color.get('action', 'utility', 'alternate', 'text'),
      'border-color': color.get('action', 'utility', 'alternate', '03'),
      'hover-color': color.get('action', 'utility', 'alternate', '03'),
      'press-color': color.get('action', 'utility', 'alternate', '02')
    ),
    'focus-border-color': color.get('action', 'utility', 'primary', 'primary')
  ),
  'destructive': (
    'primary': (
      'background': color.get('action', 'danger', 'primary', 'primary'),
      'text-color': color.get('action', 'danger', 'primary', 'text'),
      'hover-color': color.get('action', 'danger', 'primary', '03'),
      'press-color': color.get('action', 'danger', 'primary', '02'),
      'border-color': none
    ),
    'secondary': (
      'background': color.get('action', 'danger', 'alternate', 'primary'),
      'text-color': color.get('action', 'danger', 'alternate', 'text'),
      'border-color': color.get('action', 'danger', 'alternate', 'text'),
      'hover-color': color.get('action', 'danger', 'alternate', '03'),
      'press-color': color.get('action', 'danger', 'alternate', '02')
    ),
    'tertiary': (
      'background': color.get('action', 'danger', 'alternate', 'primary'),
      'text-color': color.get('action', 'danger', 'alternate', 'text'),
      'border-color': color.get('action', 'danger', 'alternate', '03'),
      'hover-color': color.get('action', 'danger', 'alternate', '03'),
      'press-color': color.get('action', 'danger', 'alternate', '02')
    ),
    'focus-border-color': color.get('action', 'danger', 'primary', 'primary')
  ),
  'transactional': (
    'primary': (
      'background': color.get('action', 'transaction', 'primary'),
      'text-color': color.get('action', 'transaction', 'text'),
      'hover-color': color.get('action', 'transaction', '03'),
      'press-color': color.get('action', 'transaction', '02'),
      'border-color': none
    ),
    'focus-border-color': color.get('action', 'transaction', 'primary')
  )
) !default;

$large-padding: spacing.get('s7') !default;