@layer kz-components {
  .stepsContainer {
    --progress-stepper-indicator-size: 1.25rem;

    width: 100%;
    grid-area: stepper;
  }

  .stepList {
    display: none;
    justify-content: center;
    align-items: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (width >= 768px) {
      display: flex;
    }
  }

  .step {
    display: flex;
    flex-grow: 1;
    flex-basis: 100%;
    justify-content: center;
    max-width: var(--spacing-96);
    overflow-wrap: break-word;
    position: relative;
    container: step / inline-size;
  }

  .stepContent {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .stepIndicator {
    width: var(--progress-stepper-indicator-size);
    height: var(--progress-stepper-indicator-size);
    position: relative;
  }

  .stepName {
    display: none;
    text-align: center;
    margin-bottom: var(--spacing-12);
    font-family: var(--typography-paragraph-small-font-family);
    font-size: var(--typography-paragraph-small-font-size);
    line-height: var(--typography-paragraph-small-line-height);
    font-weight: var(--typography-paragraph-bold-font-weight);
    color: var(--color-gray-600);
  }

  .stepName.isCurrent {
    color: var(--color-purple-800);
  }

  .stepIcon {
    color: var(--color-purple-800);
    position: absolute;
    width: var(--progress-stepper-indicator-size);
    height: var(--progress-stepper-indicator-size);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .stepIcon.isCompleted {
    color: var(--color-green-500);
  }

  .stepDivider {
    height: 0;
    display: flex;
    position: absolute;
    flex-grow: 1;
    min-width: calc(100% - var(--spacing-24));
    border: solid var(--spacing-1) var(--color-gray-300);
    margin: 0;
    border-radius: var(--border-solid-border-radius);
    inset-inline-start: 100%;

    /* sets fron the bottom to the centre of the dot */
    top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
    transform: translateX(-50%);

    :dir(rtl) & {
      left: unset;
      right: 100%;
      transform: translateX(50%);
    }
  }

  .stepperDescription {
    display: flex;
    justify-content: center;
    font-family: var(--typography-paragraph-small-font-family);
    font-weight: var(--typography-paragraph-small-font-weight);
    font-size: var(--typography-paragraph-small-font-size);
    line-height: var(--typography-paragraph-small-line-height);

    @media (width >= 768px) {
      /* sr hidden styles */
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
  }

  /* Some defensive CSS for many steps on desktop screens */
  @container step (width >= 4.5rem) {
    .stepName {
      display: inline;
    }
  }
}