@mixin path() { ... }@mixin path() { 
  padding: 0;
  margin-bottom: 0;
  display: flex;
 }

@mixin step() { ... }@mixin step() { 
  @include typography.style-as('caption');

  list-style: none;
  position: relative;
  text-align: center;
  flex: 1 1 auto;
  width: 0;
  height: 100%;

  &::before {
    content: '';
    position: absolute;
    top: settings.$bar-margin;
    height: settings.$step-height;
    width: 100%;
    right: 50%;
    transform: translateY(-50%);
    background: linear-gradient(
      to left,
      settings.$incomplete-color 50%,
      settings.$complete-color 50%
    );
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 200ms ease-in-out;
  }

  &:first-child::before {
    content: none;
  }

  &::after {
    position: absolute;
    top: settings.$bar-margin;
    right: 50%;
    z-index: 1;
    height: settings.$dot-height;
    width: settings.$dot-height;
    border-radius: 100%;
    background-color: settings.$incomplete-color;
    content: '';
    transform: translate(50%, -50%);
  }
 }

@mixin step-completed() { ... }@mixin step-completed() { 
  &::before {
    background-position: left bottom;
  }

  &::after {
    background-color: settings.$complete-color;
  }
 }

@mixin step-active() { ... }@mixin step-active() { 
  &::after {
    position: absolute;
    top: settings.$bar-margin;
    right: 50%;
    z-index: 2;
    height: settings.$active-dot-height;
    width: settings.$active-dot-height;
    border-radius: 100%;
    background-color: white;
    content: '';
    transform: translate(50%, -50%);
  }
 }

@mixin visibility-hidden() { ... }@mixin visibility-hidden() { 
  // Goal here is to hide the text but maintain the space to prevent potential shifting.
  // visibility: hidden might seem like a better choice, but removes text from accessibility tree.
  // Opacity 0 keeps the space and keeps the text in the tree.
  opacity: 0;
 }

@mixin visually-hidden() { ... }@mixin visually-hidden() { 
  @include kib-core.visually-hidden;
 }

$step-height: spacing.get('s1') !default;

$incomplete-color: color.get('action', 'switch', 'background', 'on', '03') !default;

$complete-color: color.get('action', 'switch', 'background', 'on', 'primary') !default;

$dot-height: unit.rem(12px) !default;

$active-dot-height: spacing.get('s1') !default;

$bar-margin: unit.rem(-12px) !default;