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

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

// Arrow
.#{$-steps-prefix-cls} {
  &-mode-arrow &-item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    height: $steps-size-default-arrow;
    overflow: visible;
    white-space: nowrap;

    &:not(:last-child) {
      margin-right: $steps-arrow-size-item-gap;
    }
  }

  &-mode-arrow &-item-wait {
    background-color: $steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow &-item-process {
    background-color: $steps-arrow-color-item-bg_process;
  }

  &-mode-arrow &-item-finish {
    background-color: $steps-arrow-color-item-bg_finish;
  }

  &-mode-arrow &-item-error {
    background-color: $steps-arrow-color-item-bg_error;
  }

  &-mode-arrow &-item-content {
    display: inline-block;
    box-sizing: border-box;
  }

  &-mode-arrow &-item:first-child &-item-content {
    padding-left: $steps-arrow-size-default-title-padding-left;
  }

  &-mode-arrow &-item:not(:first-child) &-item-content {
    padding-left: $steps-arrow-size-default-title-padding-left + ($steps-size-default-arrow * 0.5);
  }

  &-mode-arrow &-item-title {
    position: relative;
    display: inline-block;
    font-size: $steps-size-default-font-size-title;
    white-space: nowrap;

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

  &-mode-arrow &-item-wait &-item-title {
    color: $steps-arrow-color-item-title_wait;
  }

  &-mode-arrow &-item-process &-item-title {
    color: $steps-arrow-color-item-title_process;
  }

  &-mode-arrow &-item-finish &-item-title {
    color: $steps-arrow-color-item-title_finish;
  }

  &-mode-arrow &-item-error &-item-title {
    color: $steps-arrow-color-item-title_error;
  }

  &-mode-arrow &-item-active &-item-title {
    font-weight: $steps-arrow-font-weight-item-title_active;
  }

  &-mode-arrow &-item-description {
    max-width: none;
    margin-top: $steps-arrow-item-description-margin-top;
    font-size: $steps-size-default-font-size-description;
    white-space: nowrap;
  }

  &-mode-arrow &-item-wait &-item-description {
    color: $steps-arrow-color-item-description_wait;
  }

  &-mode-arrow &-item-process &-item-description {
    color: $steps-arrow-color-item-description_process;
  }

  &-mode-arrow &-item-finish &-item-description {
    color: $steps-arrow-color-item-description_finish;
  }

  &-mode-arrow &-item-error &-item-description {
    color: $steps-arrow-color-item-description_error;
  }

  // 前箭头
  &-mode-arrow &-item:not(:first-child)::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 0;
    height: 0;
    border-top: ($steps-size-default-arrow * 0.5) solid transparent;
    border-bottom: ($steps-size-default-arrow * 0.5) solid transparent;
    border-left: ($steps-size-default-arrow * 0.5) solid
      var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
    content: '';
  }

  // 后箭头
  &-mode-arrow &-item:not(:last-child)::after {
    position: absolute;
    top: 0;
    right: -($steps-size-default-arrow * 0.5);
    z-index: 2;
    display: block;
    clear: both;
    width: 0;
    height: 0;
    border-top: ($steps-size-default-arrow * 0.5) solid transparent;
    border-bottom: ($steps-size-default-arrow * 0.5) solid transparent;
    content: '';
  }

  &-mode-arrow &-item:not(:last-child)#{&}-item-wait::after {
    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow &-item:not(:last-child)#{&}-item-process::after {
    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_process;
  }

  &-mode-arrow &-item:not(:last-child)#{&}-item-error::after {
    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_error;
  }

  &-mode-arrow &-item:not(:last-child)#{&}-item-finish::after {
    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_finish;
  }

  // Small
  &-mode-arrow#{&}-size-small &-item {
    height: $steps-size-small-arrow;

    &-title {
      font-size: $steps-size-small-font-size-title;
    }

    &-description {
      display: none;
    }

    &:not(:first-child) {
      &::before {
        border-top: ($steps-size-small-arrow * 0.5) solid transparent;
        border-bottom: ($steps-size-small-arrow * 0.5) solid transparent;
        border-left: ($steps-size-small-arrow * 0.5) solid
          var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
      }
    }

    &:not(:last-child)::after {
      right: -($steps-size-small-arrow * 0.5);
      border-top: ($steps-size-small-arrow * 0.5) solid transparent;
      border-bottom: ($steps-size-small-arrow * 0.5) solid transparent;
      border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_wait;
    }
  }

  &-mode-arrow#{&}-size-small &-item:first-child &-item-content {
    padding-left: $steps-arrow-size-small-title-padding-left;
  }

  &-mode-arrow#{&}-size-small &-item:not(:first-child) &-item-content {
    padding-left: $steps-arrow-size-small-title-padding-left + ($steps-size-small-arrow * 0.5);
  }

  &-mode-arrow#{&}-size-small &-item-error {
    &:not(:last-child)::after {
      border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_error;
    }
  }

  &-mode-arrow#{&}-size-small &-item:not(:last-child)#{&}-item-wait::after {
    border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow#{&}-size-small &-item:not(:last-child)#{&}-item-process::after {
    border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_process;
  }

  &-mode-arrow#{&}-size-small &-item:not(:last-child)#{&}-item-finish::after {
    border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_finish;
  }
}