@mixin root-container() { ... }@mixin root-container() { 
  padding-top: spacing.get('s4');
  padding-bottom: spacing.get('s4');
  min-width: settings.$min-width;
 }

@mixin list() { ... }@mixin list() { 
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  &--compact {
    justify-content: center;
  }

  @media screen and (min-width: 480px) {
    justify-content: center;
  }
 }

@mixin list-item() { ... }@mixin list-item() { 
  margin: 0;
  padding: 0;
  display: flex;
  padding-left: settings.$list-item-spacing-large;
  padding-right: settings.$list-item-spacing-large;

  @media screen and (max-width: 480px) {
    padding-left: settings.$list-item-spacing-small;
    padding-right: settings.$list-item-spacing-small;
  }
 }

@mixin list-item-previous() { ... }@mixin list-item-previous() { 
  @include media.query(max-sm) {
    justify-content: flex-start;
  }

  @include media.query(min-md) {
    margin-right: spacing.get('s6');
    order: -1;
  }
 }

@mixin list-item-next() { ... }@mixin list-item-next() { 
  @include media.query(max-sm) {
    justify-content: flex-end;
  }

  @include media.query(min-md) {
    margin-left: spacing.get('s6');
    order: 1;
  }
 }

@mixin item() { ... }@mixin item() { 
  color: settings.$item-text-color;
  text-align: center;
 }

@mixin item-interactive() { ... }@mixin item-interactive() { 
  --kib-button-text-color: #{settings.$button-text-color};
  --kib-button-focus-border-color: #{settings.$button-focus-border-color};

  @include kib-button-new.base;
  @include kib-button-new.focus;

  // Override outline distance to be closer to the item
  &::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &:hover,
  &:active {
    text-decoration: none;
  }

  &:hover {
    --kib-button-background: #{settings.$button-hover-background-color};
  }

  &:active {
    --kib-button-background: #{settings.$button-pressed-background-color};
  }
 }

@mixin item-page() { ... }@mixin item-page() { 
  @include kib-button-new.button-padding('medium');

  min-width: kib-button-new.$button-size-medium;
  height: kib-button-new.$button-size-medium;
 }

@mixin item-disabled() { ... }@mixin item-disabled() { 
  @include kib-button-new.disabled;
 }

@mixin item-current() { ... }@mixin item-current() { 
  pointer-events: none;

  &,
  &:focus {
    --kib-button-background: #{settings.$button-selected-background-color};
  }
 }

@mixin item-action() { ... }@mixin item-action() { 
  box-shadow: inset 0 0 0 #{kib-button-new.$focus-border-radius-length} #{settings.$button-action-border-color};
  text-transform: capitalize;
  height: kib-button-new.$button-size-small;

  @include media.query(min-md) {
    height: kib-button-new.$button-size-medium;
  }
 }

@mixin item-action-next() { ... }@mixin item-action-next() { 
  padding: {
    left: settings.$action-text-spacing;
    right: settings.$action-icon-spacing;
  }
 }

@mixin item-action-previous() { ... }@mixin item-action-previous() { 
  padding: {
    left: settings.$action-icon-spacing;
    right: settings.$action-text-spacing;
  }
 }

@mixin item-actions-icon() { ... }@mixin item-actions-icon() { 
  width: settings.$action-icon-size-small;
  height: settings.$action-icon-size-small;

  @include media.query(min-md) {
    width: settings.$action-icon-size;
    height: settings.$action-icon-size;
  }
 }

@mixin item-actions-next-icon() { ... }@mixin item-actions-next-icon() { 
  margin-left: settings.$icon-spacer;
 }

@mixin item-actions-previous-icon() { ... }@mixin item-actions-previous-icon() { 
  margin-right: settings.$icon-spacer;
 }

$min-width: unit.rem(288px) !default;

$list-item-spacing-small: kib-core.dimensions-get('tiny') * 0.25 !default;

$list-item-spacing-large: kib-core.dimensions-get('tiny') * 0.5 !default;

$action-icon-size: unit.rem(32px) !default;

$action-icon-size-small: unit.rem(16px) !default;

$action-text-spacing: unit.rem(16px) !default;

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

$icon-spacer: unit.rem(8px) !default;

$size-offset: unit.rem(2px) !default;

$item-text-color: color.get('text', 'tertiary');

$button-text-color: color.get('action', 'cta', 'alternate', 'text');

$button-focus-border-color: color.get('action', 'cta', 'primary', 'primary');

$button-hover-background-color: color.get('action', 'cta', 'alternate', '03');

$button-pressed-background-color: color.get('action', 'cta', 'alternate', '02');

$button-selected-background-color: color.get('action', 'cta', 'alternate', '03');

$button-action-border-color: color.get('action', 'cta', 'alternate', '03');