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

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

.#{$steps-prefix-cls} {
  display: flex;

  &-changeable {
    .#{$steps-prefix-cls}-item-title,
    .#{$steps-prefix-cls}-item-description {
      transition: color theme.$transition-duration-1 theme.$transition-timing-function-standard;
    }
  }

  &-changeable &-item:not(#{&}-item-active, &-item-disabled) {
    cursor: pointer;

    &:hover {
      .#{$steps-prefix-cls}-item-content {
        .#{$steps-prefix-cls}-item-title,
        .#{$steps-prefix-cls}-item-description {
          color: global.$color-primary-6;
        }
      }
    }
  }
}

// Line Less
.#{$steps-prefix-cls} {
  &-line-less &-item-title::after {
    display: none !important;
  }
}

// Direction
.#{$steps-prefix-cls} {
  &-vertical {
    flex-direction: column;
  }

  &-vertical &-item {
    &:not(:last-child) {
      min-height: 90px;
    }

    &-title::after {
      display: none !important;
    }

    &-description {
      max-width: none;
    }
  }
}

// Label vertical
.#{$steps-prefix-cls} {
  &-label-vertical &-item {
    &-content {
      display: block;
      width: $steps-label-vertical-content-width;
      text-align: center;
    }

    &-description {
      max-width: none;
    }
  }
}