/* stylelint-disable declaration-no-important */
@import '../styles/themes/themes.less';

@themeSelectors: primary, warning, success, danger;

* {
  box-sizing: border-box;
}

.after-line() {
  &::after {
    position: absolute;
    top: 12px;
    left: 100%;
    width: 99999px;
    height: 1px;
    content: '';
    background-color: transparent;
  }
}


@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}

.@{bk-prefix}-steps {
  display: flex;
  width: 100%;
  font-size: 0;

  .icon-circle-4-1 {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 7px;
  }

  .@{bk-prefix}-icon {
    font-size: 24px;
    line-height: 24px;

    &.icon-loading {
      display: inline-block;
      font-size: @font-size-medium;
      animation: loadingCircle 1s infinite linear;
    }
  }

  .@{bk-prefix}-step {
    position: relative;
    flex: 1;
    margin-right: 16px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;


    &.is-controllable {
      cursor: pointer;
    }

    &.is-disabled {
      cursor: not-allowed;
      .@{bk-prefix}-step-indicator {
        color: #dcdee5;
        border-color: #dcdee5;
      }
      .@{bk-prefix}-step-title {
        color: #dcdee5;


      }
    }

    .@{bk-prefix}-step-indicator {
      z-index: 1;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      padding: 0;
      margin-right: 8px;
      line-height: 24px;
      color: #979ba5;
      text-align: center;
      vertical-align: top;
      background-color: #fff;
      border: 1px solid #979ba5;
      border-radius: 50%;

      // .@{bk-prefix}-steps-icon {
      //   color: @white-color;
      // }
    }

    .@{bk-prefix}-step-number {
      font-family: arial;
      font-size: 14px;
    }

    .@{bk-prefix}-step-content {
      display: inline-block;
      vertical-align: top;
    }

    .@{bk-prefix}-step-title {
      position: relative;
      display: inline-block;
      padding-right: 16px;
      font-size: 14px;
      line-height: 24px;
      color: #63656e;
      word-break: break-all;
      .after-line();
    }

    .@{bk-prefix}-step-description {
      max-width: 140px;
      font-size: 12px;
      color: #979ba5;
      white-space: normal;

    }

    &.@{bk-prefix}-step-no-content {
      .@{bk-prefix}-step-indicator {
        margin-right: 0;

        .after-line();

        &::after {
          top: 10px;
          left: 32px;
        }
      }
    }

    &:last-child {
      flex: none;
      margin-right: 0;

      .@{bk-prefix}-step-title {
        padding-right: 0;

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

    &.done {
      .@{bk-prefix}-step-title {
        color: @default-color;
      }
      .@{bk-prefix}-step-description {
        color: #979ba5;
      }

      .@{bk-prefix}-steps-icon {
        margin-bottom: 3px;
        font-size: 22px;
      }

      .@{bk-prefix}-step-iconerror {
        .@{bk-prefix}-steps-icon {
          font-size: 14px;
        }
      }

      &:has(+ .current.is-error),
      &:has(+ .current.@{bk-prefix}-step-error) {
        .@{bk-prefix}-step-title,
        .@{bk-prefix}-step-indicator {
          &::after {
            background-image: linear-gradient(to right, @danger-color 50%, transparent 0%);
          }
        }
      }
    }

    &.current {
      .@{bk-prefix}-step-number,
      .@{bk-prefix}-step-icon,
      .@{bk-prefix}-step-text {
        border-width: 2px;
      }

      .@{bk-prefix}-step-title,
      .@{bk-prefix}-step-description {
        color: @default-color;
      }

      &.@{bk-prefix}-step-error {
        .@{bk-prefix}-step-indicator {
          background-color: @danger-color;
          border-color: @danger-color;
        }

        .@{bk-prefix}-step-title,
        .@{bk-prefix}-step-description {
          color: @danger-color;
        }
      }
    }

    &.is-error {
      .@{bk-prefix}-step-indicator {
        background-color: @danger-color !important;
        border-color: @danger-color !important;
      }

      .@{bk-prefix}-step-content {
        .@{bk-prefix}-step-title {
          color: @danger-color !important;
        }
      }
    }
  }


  each(@themeSelectors, {
  @color: '@{value}-color';
  &-@{value} {
    .@{bk-prefix}-step {
      &.done {
        .@{bk-prefix}-step-number,
        .@{bk-prefix}-step-icon,
        .@{bk-prefix}-step-text {
          color: @@color;
          border-color: @@color;
        }


        .@{bk-prefix}-step-title,
        .@{bk-prefix}-step-indicator {
          &::after {
            background-image: linear-gradient(to right, @@color 50%, transparent 0%);
          }
        }


        &::after {
          background-image: linear-gradient(@@color 50%, transparent 0%);
        }
      }

      &.current {
        .@{bk-prefix}-step-number,
        .@{bk-prefix}-step-icon,
        .@{bk-prefix}-step-text {
          color: #fff;
          background-color: @@color;
          border-color: @@color;
        }
      }
    }
  }
})

  &-dashed {
    .@{bk-prefix}-step {
      .@{bk-prefix}-step-title,
      .@{bk-prefix}-step-indicator {
        &::after {
          background-image: linear-gradient(to right, @light-gray 50%, transparent 0%);
          background-repeat: repeat-x;
          background-position: bottom;
          background-size: 6px 1px;
        }
      }
    }
  }

  &-solid {
    .@{bk-prefix}-step {
      .@{bk-prefix}-step-title,
      .@{bk-prefix}-step-indicator {
        &::after {
          background-color: @light-gray;
        }
      }
    }
  }

  &-vertical {
    flex-direction: column;
    height: 100%;

    .@{bk-prefix}-step {
      margin-right: 0;
      margin-bottom: 8px;

      .@{bk-prefix}-step-title,
      .@{bk-prefix}-step-indicator {
        &::after {
          display: none;
        }
      }

      &::after {
        position: absolute;
        top: 32px;
        left: 12px;
        width: 1px;
        height: 100%;
        content: '';
        background-image: linear-gradient(@light-gray 50%, transparent 0%);
        background-repeat: repeat-y;
        background-position: right;
        background-size: 1px 6px;
      }

      &.done {
        &:has(+ .current.is-error),
        &:has(+ .current.@{bk-prefix}-step-error) {
          &::after {
            background-image: linear-gradient(@danger-color 50%, transparent 0%);
          }
        }
      }

      .@{bk-prefix}-step-title {
        display: flex;
        align-items: center;
        height: 100%;
        margin-top: 0;
        text-align: left;
      }
    }
  }


  &-small {
    .@{bk-prefix}-step {
      .@{bk-prefix}-step-indicator {
        width: 20px;
        height: 20px;
        line-height: 20px;
      }

      .@{bk-prefix}-step-title {
        font-size: 12px;
        line-height: 20px;
      }

      .@{bk-prefix}-step-number {
        font-size: 12px;
      }

      .@{bk-prefix}-step-icon {
        font-size: 14px;
        line-height: 14px;
      }

      &::after {
        top: 28px;
        left: 10px;
      }

      .@{bk-prefix}-step-title {
        &::after {
          top: 10px;
        }
      }

      &.@{bk-prefix}-step-no-content {
        .@{bk-prefix}-step-indicator {
          &::after {
            top: 8px;
            left: 28px;
          }
        }
      }
    }
  }
}
