@mixin button-default() { ... }@mixin button-default() { 
  @include common.button-common;
  @include kib-core-spacing(padding, huge, horizontal);

  background: settings.$default-background;
  color: settings.$default-text-color;
  transition: background-color 100ms ease-out;

  & + & {
    @include kib-core-spacing(margin, small, start);
  }

  &::after {
    border-color: settings.$default-background-focus;
  }

  &:focus {
    background-color: settings.$default-background-focus;
    outline: 0;

    &::after {
      opacity: 1;
    }
  }

  &:hover {
    background-color: settings.$default-background-hover;
    color: settings.$default-text-color;
    text-decoration: none;
  }

  &:active {
    background-color: settings.$default-background-active;
  }

  &:disabled,
  &--disabled {
    @include common.button-disabled-common;
  }

  // Hides outline when hovering over component while focused
  &:hover:focus {
    &::after {
      opacity: 0;
    }
  }
 }

@mixin button-loading() { ... }@mixin button-loading() { 
  &,
  &:focus,
  &:hover,
  &:active {
    background-color: settings.$default-background-active;
  }
 }

@mixin button-secondary() { ... }@mixin button-secondary() { 
  background-color: settings.$secondary-background;
  box-shadow: inset 0 0 0 settings.$secondary-border-width settings.$secondary-border-color;
  color: settings.$secondary-text-color;

  &:focus {
    background-color: transparent;
  }

  &:hover {
    background-color: settings.$secondary-background-hover;
    color: settings.$secondary-text-color;
  }

  &:active {
    background-color: settings.$secondary-background-active;
  }
 }

@mixin button-secondary-loading() { ... }@mixin button-secondary-loading() { 
  &,
  &:focus,
  &:hover,
  &:active {
    background-color: settings.$secondary-background-active;
  }
 }

@mixin button-danger() { ... }@mixin button-danger() { 
  background-color: settings.$danger-background;

  &::after {
    border-color: settings.$danger-background-focus;
  }

  &:focus {
    background-color: settings.$danger-background-focus;
  }

  &:hover {
    background-color: settings.$danger-background-hover;
  }

  &:active {
    background-color: settings.$danger-background-active;
  }
 }

@mixin button-danger-loading() { ... }@mixin button-danger-loading() { 
  &,
  &:focus,
  &:hover,
  &:active {
    background-color: settings.$danger-background-active;
  }
 }

@mixin button-danger-secondary() { ... }@mixin button-danger-secondary() { 
  background-color: settings.$secondary-background;
  color: settings.$danger-background;

  &:hover {
    background-color: settings.$danger-secondary-background-hover;
  }

  &:active {
    background-color: settings.$danger-secondary-background-active;
    color: settings.$danger-secondary-text-color-active;
  }
 }

@mixin button-danger-secondary-loading() { ... }@mixin button-danger-secondary-loading() { 
  &,
  &:focus,
  &:hover,
  &:active {
    background-color: settings.$danger-secondary-background-active;
    color: settings.$danger-secondary-text-color-active;
  }
 }

@mixin button-transactional() { ... }@mixin button-transactional() { 
  background-color: settings.$transactional-background;

  &::after {
    border-color: settings.$transactional-background-focus;
  }

  &:focus {
    background-color: settings.$transactional-background-focus;
  }

  &:hover {
    background-color: settings.$transactional-background-hover;
  }

  &:active {
    background-color: settings.$transactional-background-active;
  }
 }

@mixin button-transactional-loading() { ... }@mixin button-transactional-loading() { 
  &,
  &:focus,
  &:hover,
  &:active {
    background-color: settings.$transactional-background-active;
  }
 }

@mixin button-full-width() { ... }@mixin button-full-width() { 
  display: flex;
  width: 100%;

  & + & {
    @include kib-core-spacing(margin, none, start);
    @include kib-core-spacing(margin, small, top);
  }
 }

@mixin button-with-icon() { ... }@mixin button-with-icon() { 
  &__icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    width: settings.$icon-size;
    height: settings.$icon-size;

    &:not(:only-child) {
      @include kib-core-spacing(margin, small, end);
    }

    > svg {
      fill: currentColor;
    }
  }
 }

$default-background: kib-core-theme-get('next', 'brand') !default;

$default-background-hover: kib-core-theme-get('next', 'brand', 400) !default;

$default-background-focus: kib-core-theme-get('next', 'brand', 600) !default;

$default-background-active: kib-core-theme-get('next', 'brand', 800) !default;

$default-text-color: kib-core-theme-get('next', 'neutral', 50) !default;

$secondary-background: transparent !default;

$secondary-background-hover: kib-core-theme-get('next', 'brand', 50) !default;

$secondary-background-active: kib-core-theme-get('next', 'brand', 100) !default;

$secondary-border-color: currentColor !default;

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

$secondary-text-color: $default-background !default;

$danger-background: kib-core-theme-get('next', 'danger') !default;

$danger-background-hover: kib-core-theme-get('next', 'danger', 600) !default;

$danger-background-focus: $danger-background !default;

$danger-background-active: kib-core-theme-get('next', 'danger', 'high') !default;

$danger-secondary-background-hover: kib-core-theme-get('next', 'danger', 'low') !default;

$danger-secondary-background-active: kib-core-theme-get('next', 'danger', 100) !default;

$danger-secondary-text-color: $danger-background !default;

$danger-secondary-text-color-active: kib-core-theme-get('next', 'danger', 900) !default;

$transactional-background: kib-core-theme-get('next', 'transactional') !default;

$transactional-background-hover: kib-core-theme-get('next', 'transactional', 300) !default;

$transactional-background-focus: $transactional-background !default;

$transactional-background-active: kib-core-theme-get('next', 'transactional', 500) !default;

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