@use "../../breakpoint" as *;
@use "../../config" as *;
@use "../../motion" as *;
@use "../../theme" as *;
@use "../../spacing" as *;
@use "../../type" as *;
@use "../../utilities/convert";
@use "../../utilities/visually-hidden" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/skeleton" as *;

@mixin step-navigation {
  .#{$prefix}--step-navigation {
    @include type-style("caption-02");
    @include font-family("sans");
    color: $text-body-default;
    font-weight: 600;
    height: auto;
    width: 100%;
    position: relative;

    @include breakpoint("md") {
      background: none;
      min-height: calcRem(49px);
    }
  }

  .#{$prefix}--step-navigation-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    //padding: 0 $spacing-md;
    height: 2em;
    cursor: pointer;
    //background-color: var(--field-02);

    svg {
      width: 1em;
      height: 1em;
      fill: $action-default-fill-primary-default;
    }

    @include breakpoint("md") {
      display: none;
    }
  }

  .#{$prefix}--step-navigation-trigger-text {
    text-decoration: none;
    font-weight: 600;
    color: $text-body-default;
    &:focus {
      @include focus-outline("border");
    }
  }

  .#{$prefix}--step-navigation__nav {
    margin: 0;
    padding: 0;
    //position: absolute;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: row;
    a {
      text-decoration: none;
    }

    /* @include breakpoint(bp--sm--major) {
      @include typescale('epsilon');
      flex-direction: column;
      margin-right: $spacing-md;
      margin-left: $spacing-md;
      background: none;
      box-shadow: none;
      z-index: auto;
    }*/
  }

  // .#{$prefix}--step-navigation__nav--inline {
  //   position: relative;
  //   margin-left: 0;
  //   margin-right: 0;
  // }

  .#{$prefix}--step-navigation__nav--hidden {
    display: none;

    @include breakpoint("md") {
      display: flex;
    }
  }

  // Small StepNavigation
  .#{$prefix}--step-navigation--small {
    // font-size: 0.5rem;
    .#{$prefix}--step-navigation__nav-item__text {
      display: none;
    }
  }

  // Vertical StepNavigation
  .#{$prefix}--step-navigation--vertical {
    ul {
      flex-direction: column;
    }
    .#{$prefix}--step-navigation__nav-item__text {
      margin-right: 0.5em;
    }

    .#{$prefix}--step-navigation__nav-item {
      flex-direction: row;
      min-width: 200px;
      min-height: 75px;
    }

    .#{$prefix}--step-navigation__nav-item--selected {
      margin-left: 0.2rem;

      .#{$prefix}--step-navigation__nav-item__indicator {
        margin-right: 1.2rem;
      }
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      &:after {
        left: calc(50% + 0px);
        width: 2px;
        height: 30px;
        top: 34px;
      }
    }

    .#{$prefix}--step-navigation__nav-item__text {
      margin-right: 0;
      margin-top: 0.6rem;
      display: block;
    }
  }

  // Skeleton state
  .#{$prefix}--step-navigation.#{$prefix}--skeleton {
    pointer-events: none;
    cursor: default;
  }

  .#{$prefix}--step-navigation.#{$prefix}--skeleton
    .#{$prefix}--step-navigation__nav-link {
    @include skeleton;
    width: calcRem(75px);
    height: calcRem(12px);
  }

  .#{$prefix}--step-navigation.#{$prefix}--skeleton
    .#{$prefix}--step-navigation-trigger {
    @include skeleton;
    width: calcRem(100px);
  }

  .#{$prefix}--step-navigation.#{$prefix}--skeleton
    .#{$prefix}--step-navigation-trigger
    svg {
    @include visually-hidden;
  }
}