@use "./mixins";
@use "../../../styles/tokens/breakpoint";

@layer components {
  .stepbar {
    $this: &;

    &__label {
      display: none;
    }

    &__list {
      @include mixins.list-base();
    }

    &__item {
      @include mixins.item-base();
      @include mixins.item-color("default", "done");

      * {
        @include mixins.first-letter-only();
      }

      &--current {
        @include mixins.item-color("default", "current");

        @include breakpoint.get("sm") {
          @include mixins.item-wide();

          * {
            @include mixins.full-title();
          }
        }
      }

      &--current ~ & {
        @include mixins.item-color("default", "next");
      }

      .background-contrast &,
      .surface-contrast &,
      .is-dark & {
        @include mixins.item-color("inverse", "done");

        &--current {
          @include mixins.item-color("inverse", "current");
        }

        &--current ~ .stepbar__item {
          @include mixins.item-color("inverse", "next");
        }
      }

      @each $breakpoint in ("md", "lg", "xl") {
        @include breakpoint.get($breakpoint) {
          #{$this}--wide-#{$breakpoint} &:not(&--current) {
            @include mixins.item-wide();

            * {
              @include mixins.full-title();
            }
          }
        }
      }
    }

    &__link {
      @include mixins.link-color("default");
      @include mixins.link-overlay();
      @include mixins.link-underline();

      .background-contrast &,
      .surface-contrast &,
      .is-dark & {
        @include mixins.link-color("inverse");
      }
    }
  }
}