@mixin button-small-default() { ... }@mixin button-small-default() { 
  @include common.button-common;

  padding-left: settings.$spacing-vertical;
  padding-right: settings.$spacing-vertical;
  height: settings.$height;
  background-color: 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 {
    background-color: settings.$default-background-focus;
    outline: 0;

    &::after {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    &: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-small-loading() { ... }@mixin button-small-loading() { 
  &,
  &:focus,
  &:hover {
    background-color: settings.$default-background-active;
  }
 }

@mixin button-small-secondary() { ... }@mixin button-small-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-small-secondary-loading() { ... }@mixin button-small-secondary-loading() { 
  &,
  &:focus,
  &:hover {
    background-color: settings.$secondary-background-active;
  }
 }

@mixin button-small-tertiary() { ... }@mixin button-small-tertiary() { 
  background-color: settings.$tertiary-background;
  color: settings.$tertiary-text-color;

  &:focus {
    background-color: transparent;
  }

  @media (hover: hover) {
    &:hover {
      background-color: settings.$tertiary-background-hover;
      color: settings.$tertiary-text-color;
    }
  }

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

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

@mixin button-small-transactional() { ... }@mixin button-small-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-small-transactional-loading() { ... }@mixin button-small-transactional-loading() { 
  &,
  &:focus,
  &:hover {
    background-color: settings.$transactional-background-active;
  }
 }

@mixin button-small-neutral() { ... }@mixin button-small-neutral() { 
  background-color: settings.$neutral-background;
  color: settings.$neutral-text-color;

  &:focus {
    background-color: transparent;
  }

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

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

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

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

  &::after {
    border-color: currentColor;
  }

  &:focus {
    background-color: transparent;
  }

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

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

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

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

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

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

$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', 900) !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;

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

$tertiary-background: transparent !default;

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

$tertiary-background-active: kib-core-theme-get('next', 'brand', 100) !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;

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

$neutral-background: transparent !default;

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

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

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

$danger-background: transparent !default;

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

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

$height: kib-core-dimensions-get('huge') !default;

$spacing-vertical: unit.rem(12px) !default;