@mixin card() { ... }@mixin card() { 
  @include typography.style-as('paragraph-1');

  display: block;
  width: 100%;
  background-color: settings.$background-color;
  border: settings.$border-width solid settings.$border-color;
  border-radius: settings.$border-radius;
  color: settings.$text-color;
  text-align: left;
 }

@mixin card-interactive() { ... }@mixin card-interactive() { 
  @include card;
  @include card-interactive-default;

  &:hover {
    @include card-interactive-hover;
  }

  &:focus {
    @include card-interactive-focus;
  }

  &:active {
    @include card-interactive-active;
  }

  &:disabled {
    @include card-interactive-disabled;
  }

  // Hides outline when hovering over component while focused
  &:hover:focus {
    @include card-interactive-focus-cancel;
  }
 }

@mixin card-interactive-default() { ... }@mixin card-interactive-default() { 
  position: relative;
  z-index: 1;
  overflow: visible;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color settings.$transition-duration;

  &::before {
    $distance: settings.$border-width * -3;

    position: absolute;
    top: $distance;
    left: $distance;
    right: $distance;
    bottom: $distance;
    border: settings.$outline-border-width solid settings.$outline-border-color;
    border-radius: settings.$outline-radius;
    content: '';
    opacity: 0;
    pointer-events: none;
    transition: opacity settings.$transition-duration;
  }

  @media (prefers-reduced-motion: reduce) {
    &,
    &::before {
      transition: none;
    }
  }
 }

@mixin card-interactive-hover() { ... }@mixin card-interactive-hover() { 
  @include elevation.elevation;

  color: settings.$text-color;
  text-decoration: none;
 }

@mixin card-interactive-focus() { ... }@mixin card-interactive-focus() { 
  color: settings.$text-color;
  outline: 0;
  text-decoration: none;

  &::before {
    opacity: 1;
  }
 }

@mixin card-interactive-focus-cancel() { ... }@mixin card-interactive-focus-cancel() { 
  &::before {
    opacity: 0;
  }
 }

@mixin card-interactive-active() { ... }@mixin card-interactive-active() { 
  background-color: settings.$active-background-color;
 }

@mixin card-interactive-disabled() { ... }@mixin card-interactive-disabled() { 
  opacity: 0.5;
  pointer-events: none;
 }

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

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

$border-color: color.get('ui-bg', '04') !default;

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

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

$outline-border-color: color.get('link', 'focus', 'primary') !default;

$outline-border-width: $border-width !default;

$outline-radius: $border-radius + ($outline-border-width * 2) !default;

$text-color: color.get('text', 'primary') !default;

$transition-duration: 200ms !default;