@mixin button-common() { ... }@mixin button-common() { 
  @include kib-core-spacing(padding, none, vertical);
  @include kib-typography.style-as-type('button');

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

  /* Custom outline around button shown on focus */
  &::after {
    $distance: unit.rem(-4px);

    position: absolute;
    z-index: -1;
    top: $distance;
    left: $distance;
    right: $distance;
    bottom: $distance;
    border: unit.rem(2px) solid currentColor;
    border-radius: settings.$button-radius + kib-core-dimensions-get('tiny');
    color: inherit;
    content: '';
    opacity: 0;
    transition: opacity 100ms ease-out;
  }
 }

@mixin splash() { ... }@mixin splash() { 
  background-color: var(--splash-background);
  color: var(--splash-text-color);

  &::after {
    border-color: var(--splash-background);
  }

  &:focus {
    background-color: var(--splash-background-focus);
  }

  &:hover {
    background-color: var(--splash-background-hover);
    color: var(--splash-text-color);
  }

  &:active {
    background-color: var(--splash-background-active);
  }
 }

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

  &::after {
    border-color: var(--splash-border);
  }

  &:focus {
    background-color: var(--splash-background-focus);
  }

  &:hover {
    background-color: var(--splash-background-hover);
    color: var(--splash-text-color);
  }

  &:active {
    background-color: var(--splash-background-active);
  }
 }

$button-disabled-opacity: 0.5 !default;

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

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

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