@mixin root-container() { ... }@mixin root-container() { 
  margin-bottom: spacing.get('s6');
 }

@mixin list() { ... }@mixin list() { 
  @include kib-scroller.container;
  @include kib-scroller.hide-scrollbar;

  padding-left: spacing.get('s1');
  padding-right: spacing.get('s1');
  margin-bottom: 0;

  // Offsets the adding horizontal padding to keep vertical alignment with other content
  margin-left: calc(#{spacing.get('s1')} * -1);
  margin-right: calc(#{spacing.get('s1')} * -1);

  // Disable scroll snapping since the variance in breadcrumb length
  // can lead to some quirky behavior on very small screens.
  scroll-snap-type: initial;
 }

@mixin item() { ... }@mixin item() { 
  @include kib-scroller.item;
  @include typography.style-as('caption');

  margin-bottom: 0;
  height: settings.$height;
  color: settings.$item-text-color;

  // Centers the item in the focus state
  display: flex;
  align-items: center;

  & + & {
    &::before {
      margin-right: spacing.get('s2');
      content: '/';
    }
  }
 }

@mixin link() { ... }@mixin link() { 
  @include link.link(false);

  display: inline-block;
  line-height: inherit;

  &:focus {
    outline-offset: -1px;
  }

  &:focus-visible {
    border-radius: unit.rem(2px);
    outline: unit.rem(2px) solid settings.$link-outline-color-focus;
    outline-offset: unit.rem(2px);
  }
 }

$height: unit.rem(32px) !default;

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

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

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

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

$focus-outline-offset: kib-core.dimensions-get(tiny) !default;