@mixin menu-link() { ... }@mixin menu-link() { 
  @include typography.style-as('section-1');

  padding-left: spacing.get('s4');
  padding-right: spacing.get('s4');
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: settings.$link-background-color;
  border: settings.$link-border-width solid settings.$link-border-color;
  border-radius: settings.$link-border-radius;
  height: settings.$link-height;
  transition: border-color 200ms, background-color 200ms;
  text-decoration: none;

  &,
  &:visited {
    color: settings.$link-text-color;
  }

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

  &:focus {
    border-color: settings.$link-border-color-focus;
    outline: none;
  }

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

  &--current {
    background-color: settings.$link-background-color-current;
  }
 }

@mixin menu-link-icon-wrapper() { ... }@mixin menu-link-icon-wrapper() { 
  margin-right: spacing.get('s4');

  > svg {
    display: block;
    width: settings.$link-icon-size;
    height: settings.$link-icon-size;
    fill: settings.$link-icon-color;
  }
 }

@mixin menu-link-label() { ... }@mixin menu-link-label() { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

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

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

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

$link-text-color-hover: $link-text-color !default;

$link-background-color: transparent !default;

$link-background-color-hover: color.get('menu', 'primary', 'hover', 'primary') !default;

$link-background-color-active: color.get('menu', 'primary', 'pressed', 'primary') !default;

$link-background-color-current: color.get('menu', 'primary', 'selected', 'primary') !default;

$link-border-color: transparent !default;

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

$link-height: (kib-core.dimensions-get('large')) * 2 !default;

$link-icon-color: currentColor !default;

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