@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use '@components/steps/style/token.scss' as *;

$-steps-prefix-cls: string.unquote('#{theme.$prefix}-steps');

// Navigation
.#{$-steps-prefix-cls} {
  &-mode-navigation#{&}-label-horizontal &-item:not(:last-child) &-item-title::after {
    display: none;
  }

  &-mode-navigation &-item {
    margin-right: $steps-navigation-margin-right;
    padding-right: $steps-navigation-spacing-arrow-right;
    padding-left: $steps-navigation-padding-left;

    &:last-child {
      flex: 1;
    }

    &-content {
      margin-bottom: 20px;
    }

    &-description {
      padding-right: 20px;
    }

    &-active::after {
      position: absolute;
      right: $steps-navigation-spacing-ink-right;
      bottom: 0;
      left: $steps-navigation-spacing-ink-left;
      display: block;
      height: 2px;
      background-color: global.$color-primary-6;
      content: '';
    }

    &-active:last-child::after {
      width: 100%;
    }
  }

  &-mode-navigation &-item:not(:last-child) &-item-content::after {
    position: absolute;
    top: $steps-navigation-size-arrow-top;
    right: 30px;
    display: inline-block;
    width: $steps-navigation-size-arrow;
    height: $steps-navigation-size-arrow;
    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
    border: $steps-navigation-size-arrow-line-width solid $steps-navigation-color-arrow;
    border-bottom: none;
    border-left: none;
    transform: rotate(45deg);
    content: '';
  }
}