@import "../lib.less";
@import "../variables/components/steps.less";

.@{veui-prefix}-steps {
  @step-height: 32px;
  @title-font-size: 14px;
  @title-height: 20px;
  @desc-font-size: 12px;
  @marker-font-size: 16px;
  @separator-gap-x: 12px;
  @separator-gap-y: 12px;
  @separator-width: 1px;
  @border-width: 1px;
  @min-step-connector-width: 16px;
  @min-safe-connector-width: 8px;
  @reserved-space: @veui-shadow-spread-focus;
  display: flex;

  &-step {
    flex: 1;
    display: flex;
    text-decoration: none;
    overflow: hidden;
    pointer-events: none;
    padding: @reserved-space 0 0 @reserved-space;
    margin: -@reserved-space @separator-gap-x 0 -@reserved-space;
    background-color: @veui-steps-normal-marker-foreground-color;

    &-index-container {
      pointer-events: all;
    }

    &-index {
      flex-grow: 0;
      flex-shrink: 0;
      .size(@step-height);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: @marker-font-size;
      border-radius: 50%;
      .veui-transition(background-color, box-shadow, border-color);

      .@{veui-prefix}-icon {
        .veui-icon-size(@veui-steps-marker-icon-size);
      }
    }

    &-content {
      padding-left: @veui-steps-marker-spacing;
      pointer-events: all;
    }

    &-label {
      .margin(veui-sum(@step-height / 2, -@title-height / 2), _, 0);
      line-height: @veui-line-height-m;
      font-size: @title-font-size;
      color: @veui-steps-title-font-color;
      font-weight: @veui-steps-title-font-weight;
      margin-right: @separator-gap-x;
      display: inline-block;
      position: relative;
      max-width: @veui-steps-title-max-width-horizontal;
      word-wrap: break-word;
      .veui-transition(color);

      &::after {
        .make-connector();
        top: veui-sum(@title-height / 2, -@separator-width / 2);
        left: veui-sum(100%, @separator-gap-x);
      }
    }

    &-desc {
      .margin(@veui-steps-title-spacing, _, 0);
      color: @veui-steps-desc-font-color;
      font-size: @desc-font-size;
      max-width: @veui-steps-desc-max-width-horizontal;
      word-wrap: break-word;
    }

    &:last-child {
      margin-right: 0;
      flex: 0 1 auto;
      .@{veui-prefix}-steps-step-label::after {
        display: none;
      }
    }

    &-connector,
    &-connector-placeholder {
      &-completed {
        background-color: @veui-steps-connector-color-completed;
      }
      &-current {
        background-color: @veui-steps-connector-color-current;
      }
      &-incomplete {
        background-color: @veui-steps-connector-color-incomplete;
      }
      &-error {
        background-color: @veui-steps-connector-color-error;
      }
      &-error-current {
        background-color: @veui-steps-connector-color-error-current;
      }
    }

    &-completed {
      .@{veui-prefix}-steps-step-index {
        border: @border-width solid @veui-steps-marker-border-color-completed;
        background-color: @veui-steps-marker-background-color-completed;
        color: @veui-steps-connector-color-completed;
      }

      &.focus-visible {
        .@{veui-prefix}-steps-step-index {
          background-color: @veui-steps-marker-background-color-completed-focus;
          box-shadow: @veui-steps-marker-shadow-completed-focus;
        }
      }
    }

    &-current {
      .@{veui-prefix}-steps-step-index {
        border: @border-width solid @veui-steps-marker-border-color-current;
        border-color: @veui-steps-marker-background-color-current;
        background: @veui-steps-marker-border-color-current;
        color: @veui-steps-marker-color-current;
      }

      &.focus-visible {
        .@{veui-prefix}-steps-step-index {
          background-color: @veui-steps-marker-background-color-current-focus;
          box-shadow: @veui-steps-marker-shadow-current-focus;
        }
      }
    }

    &-incomplete {
      .@{veui-prefix}-steps-step {
        &-index {
          border: @border-width solid @veui-steps-marker-border-color-incomplete;
          background-color: @veui-steps-marker-background-color-incomplete;
          color: @veui-steps-marker-color-incomplete;
        }
        &-label {
          color: @veui-steps-title-font-color-incomplete;
        }
        &-desc {
          color: @veui-steps-desc-font-color-incomplete;
        }
      }
    }

    &-error {
      .@{veui-prefix}-steps-step-index {
        border: @border-width solid @veui-steps-marker-border-color-error;
        background: @veui-steps-marker-background-color-error;
        color: @veui-steps-marker-color-error;
      }

      &.focus-visible {
        .@{veui-prefix}-steps-step-index {
          background-color: @veui-steps-marker-background-color-error-focus;
          box-shadow: @veui-steps-marker-shadow-error-focus;
        }
      }
    }

    &-error-current {
      .@{veui-prefix}-steps-step-index {
        border: @border-width solid @veui-steps-marker-border-color-error-current;
        background: @veui-steps-marker-background-color-error-current;
        color: @veui-steps-marker-color-error-current;
      }

      &.focus-visible {
        .@{veui-prefix}-steps-step-index {
          background-color: @veui-steps-marker-background-color-error-current-focus;
          box-shadow: @veui-steps-marker-shadow-error-current-focus;
          border-color: @veui-steps-marker-border-color-error-current-focus;
        }
      }
    }

    &-next-incomplete {
      &::after,
      .@{veui-prefix}-steps-step-label::after,
      .@{veui-prefix}-steps-step-index::after {
        background-color: @veui-steps-connector-color-incomplete;
      }
    }

    &-next-completed {
      &::after,
      .@{veui-prefix}-steps-step-label::after,
      .@{veui-prefix}-steps-step-index::after {
        background-color: @veui-steps-connector-color-completed;
      }
    }

    &-next-error {
      &::after,
      .@{veui-prefix}-steps-step-label::after,
      .@{veui-prefix}-steps-step-index::after {
        background-color: @veui-steps-connector-color-error;
      }
    }

    &-next-current {
      &::after,
      .@{veui-prefix}-steps-step-label::after,
      .@{veui-prefix}-steps-step-index::after {
        background-color: @veui-steps-connector-color-current;
      }
    }

    &-next-error-current {
      &::after,
      .@{veui-prefix}-steps-step-label::after,
      .@{veui-prefix}-steps-step-index::after {
        background-color: @veui-steps-connector-color-error-current;
      }
    }
  }
  &[ui~='normal'],
  &[ui~='icon'] {
    a.@{veui-prefix}-steps {
      &-step {
        &-completed {
          &:hover {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-completed-hover;
            }
          }
  
          &:active {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-completed-active;
            }
          }
        }
  
        &-current {
          &:hover {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-current-hover;
            }
          }
  
          &:active {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-current-active;
              border-color: @veui-steps-marker-border-color-current-active;
            }
          }
        }
  
        &-incomplete {
          &:hover {
            .@{veui-prefix}-steps-step-label {
              color: @veui-steps-title-font-color-incomplete;
            }
          }
  
          &:active {
            .@{veui-prefix}-steps-step-label {
              color: @veui-steps-desc-font-color-incomplete;
            }
          }
        }
  
        &-error {
          &:hover {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-error-hover;
            }
          }
  
          &:active {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-error-active;
            }
          }
        }
  
        &-error-current {
          &:hover {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-error-current-hover;
              border-color: @veui-steps-marker-border-color-error-current-hover;
            }
          }
  
          &:active {
            .@{veui-prefix}-steps-step-index {
              background-color: @veui-steps-marker-background-color-error-current-active;
              border-color: @veui-steps-marker-border-color-error-current-active;
            }
          }
        }
      }
    }
  }
  

  .@{veui-prefix}-steps a,
  .@{veui-prefix}-link {
    &:hover,
    &.focus-visible,
    &:active,
    &.@{veui-prefix}-disabled {
      text-decoration: none;
    }
  }

  div.@{veui-prefix}-link {
    cursor: default;
  }

  .make-connector() {
    .size(9999px, @separator-width);
    content: "";
    pointer-events: none;
    margin: 0;
    position: absolute;
  }

  .make-fixed-length-connector() {
    .size(@separator-gap-x, @separator-width);
    content: "";
    pointer-events: none;
  }

  &[ui~="horizon"] {
    .@{veui-prefix}-steps-step {
      flex-direction: column;
      position: relative;
      margin-right: 0;
      text-align: center;
      flex: 1;

      &-content {
        padding-left: 0;
        text-align: left;
      }

      &-label {
        margin-top: @veui-steps-marker-spacing;
        margin-right: 0;
        &::after {
          display: none;
        }
      }
      &-index,
      &-desc {
        .margin(_, 0);
      }

      &-connector {
        flex-grow: 0;
        .make-fixed-length-connector();
        background-color: @veui-background-color-normal;
        margin-top: veui-sum(@step-height / 2, -@separator-width / 2);
      }

      &::after {
        .make-connector();
        top: veui-sum(@step-height / 2, @reserved-space, -@separator-width / 2);
        left: veui-sum(@step-height, @separator-gap-x);
      }

      &::before {
        .make-connector();
        top: veui-sum(@step-height / 2, @reserved-space, -@separator-width / 2);
        right: veui-sum(50%, @step-height / 2, @separator-gap-x);
      }

      &:first-child::before,
      &:last-child::after {
        display: none;
      }
    }
    &[ui~='line'] {
      .@{veui-prefix}-steps-step {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: @veui-steps-line-step-height-m;
        background-color: @veui-steps-line-step-background-color;
        padding: 0 @veui-steps-line-padding-horizontal;
        margin: 0;
        &-label {
          margin-top: 0;
          margin-left: @veui-spacing-unit * 2;
        }
        &-content {
          white-space: nowrap;
        }
        &-connector,
        &-desc,
        &-current .@{veui-prefix}-steps-step-index,
        &-incomplete .@{veui-prefix}-steps-step-index {
          display: none;
        }
        &-index {
          width: @veui-steps-line-marker-size-m;
          height: @veui-steps-line-marker-size-m;
          font-size: @veui-steps-line-marker-size-m - @veui-height-unit;
          background-color: transparent;
        }
        &-completed .@{veui-prefix}-steps-step-index {
          border-color: @veui-steps-line-marker-border-color-completed;
          color: @veui-steps-line-marker-border-color-completed;
        }
        &-error .@{veui-prefix}-steps-step-index {
          border-color: @veui-steps-line-marker-border-color-error;
          color: @veui-steps-line-marker-border-color-error;
        }
        &-error .@{veui-prefix}-steps-step-label {
          color: @veui-steps-line-marker-border-color-error;
        }
        &-current .@{veui-prefix}-steps-step-index {
          border-color: @veui-steps-line-marker-border-color-current;
          color: @veui-steps-line-marker-border-color-current;
        }
        &-current .@{veui-prefix}-steps-step-label {
          color: @veui-steps-line-marker-border-color-current;
        }
        &-error-current .@{veui-prefix}-steps-step-index {
          border-color: @veui-steps-line-marker-border-color-eror-current;
          color: @veui-steps-line-marker-border-color-eror-current;
        }
        &-error-current .@{veui-prefix}-steps-step-label {
          color: @veui-steps-line-marker-border-color-eror-current;
        }
        &::before {
          content: "";
          width: 0;
          height: 0;
          top: 0;
          left: 0;
          right: auto;
          border-top: @veui-steps-line-step-height-m / 2 solid @veui-steps-line-step-background-color;
          border-bottom: @veui-steps-line-step-height-m / 2 solid @veui-steps-line-step-background-color;
          border-left: @veui-spacing-unit solid @veui-steps-line-background-color;
        }
        &::after {
          width: 0;
          height: 0;
          top: 0;
          left: auto;
          right: 0;
          border-top: @veui-steps-line-step-height-m / 2 solid @veui-steps-line-background-color;
          border-bottom: @veui-steps-line-step-height-m / 2 solid @veui-steps-line-background-color;
          border-left: @veui-spacing-unit solid @veui-steps-line-step-background-color;
        }
      }
    }
  }

  &[ui~="vertical"] {
    display: inline-block;
    flex-direction: column;

    .@{veui-prefix}-steps-step {
      margin-right: 0;
      margin-top: @separator-gap-y;
      display: flex;
      overflow: initial;

      &-index-container {
        display: flex;
        flex-direction: column;
        .@{veui-prefix}-steps-step-connector-placeholder {
          content: "";
          flex-grow: 1;
          width: @separator-width;
          min-height: @min-safe-connector-width;
          margin-left: veui-sum(@step-height / 2, -@separator-width / 2);
          margin-top: @separator-gap-y;
          pointer-events: none;
        }
      }

      &-index {
        position: relative;
        margin-top: 0;
        flex-grow: 0;
      }

      &-label,
      &-desc {
        max-width: inherit;
      }

      &-connector {
        .size(@separator-width, @min-step-connector-width);
        content: "";
        pointer-events: none;
        margin-left: veui-sum(@step-height / 2, -@separator-width / 2);
      }

      &-label::after,
      &:last-child .@{veui-prefix}-steps-step-index::after {
        display: none;
      }

      &:first-child {
        margin-top: 0;
      }
    }

    &[ui~='simple'] {
      .@{veui-prefix}-steps-step {
        &-label {
          margin-top: 0;
        }
        &-connector {
          margin-top: 0;
          margin-left: @veui-steps-simple-marker-size-current-m / 2;
        }
        &-completed,
        &-error,
        &-incomplete {
          .@{veui-prefix}-steps-step-content{
            @title-offsetY: veui-sum(@veui-steps-simple-marker-size-m, -@title-font-size * @veui-line-height-m) / 2;
            transform: translateY(@title-offsetY);
          }
          .@{veui-prefix}-steps-step-index-container {
            margin-left: @veui-spacing-unit / 2;
          }
          .@{veui-prefix}-steps-step-connector-placeholder {
            margin-left: @veui-steps-simple-marker-size-m / 2;
          }
        }
        &-current,
        &-error-current {
          .@{veui-prefix}-steps-step-content{
            @title-offsetY: veui-sum(@veui-steps-simple-marker-size-current-m, -@title-font-size * @veui-line-height-m) / 2;
            transform: translateY(@title-offsetY);
          }
          .@{veui-prefix}-steps-step-connector-placeholder {
            margin-left: @veui-steps-simple-marker-size-current-m / 2;
          }
        }
      }
    }
  }

  &[ui~='simple'] {
    .@{veui-prefix}-steps-step {
      .@{veui-prefix}-steps-step-index {
        position: relative;
        border: 0;
        overflow: hidden;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      &-completed,
      &-error,
      &-incomplete {
        .@{veui-prefix}-steps-step-index {
          width: @veui-steps-simple-marker-size-m;
          height: @veui-steps-simple-marker-size-m;
        }
        &::after {
          top: veui-sum(@veui-steps-simple-marker-size-m / 2, @reserved-space, -@separator-width / 2);
          left: veui-sum(@veui-steps-simple-marker-size-m, @separator-gap-x);
        }
      }
      &-current,
      &-error-current {
        .@{veui-prefix}-steps-step-index {
          width: @veui-steps-simple-marker-size-current-m;
          height: @veui-steps-simple-marker-size-current-m;
          margin-top: (@veui-steps-simple-marker-size-m - @veui-steps-simple-marker-size-current-m) / 2;
        }
        &::after {
          top: veui-sum(@veui-steps-simple-marker-size-m / 2, @reserved-space, -@separator-width / 2);
          left: veui-sum(@veui-steps-simple-marker-size-current-m, @separator-gap-x);
        }
      }
      &-completed,
      &-current {
        .@{veui-prefix}-steps-step-index::before {
          background-color: @veui-steps-marker-border-color-completed;
        }
      }
      &-error,
      &-error-current {
        .@{veui-prefix}-steps-step-index::before {
          background-color: @veui-steps-marker-border-color-error;
        }
      }
      &-incomplete {
        .@{veui-prefix}-steps-step-index::before {
          background-color: @veui-steps-marker-border-color-incomplete;
        }
      }
      &-label {
        margin-top: @veui-steps-simple-title-margin-top;
      }
      &-connector {
        margin-top: veui-sum(@veui-steps-simple-marker-size-m / 2, -@separator-width / 2);
      }
    }
  }

  &[ui~='icon'] {
    .@{veui-prefix}-steps-step {
      &-content {
        display: none;
      }
    }
  }

  &[ui~="s"] {
    @step-height: @veui-steps-marker-size-s;
    @title-font-size: @veui-steps-title-font-size-s;
    @title-height: veui-line-height(@veui-line-height-m, @title-font-size);
    @desc-font-size: @veui-steps-desc-font-size-s;
    @marker-font-size: @veui-steps-marker-font-size-s;

    .@{veui-prefix}-steps {
      &-step {
        &-index {
          .size(@step-height);
          line-height: @step-height - @border-width * 2;
          font-size: @marker-font-size;
        }

        &-label {
          font-size: @title-font-size;

          &::after {
            top: veui-sum(@title-height / 2, -@separator-width / 2);
          }
        }

        &-desc {
          font-size: @desc-font-size;
        }
      }
    }

    &[ui~="horizon"] {
      .@{veui-prefix}-steps-step {
        &-connector {
          margin-top: veui-sum(@step-height / 2, -@separator-width / 2);
        }
        &::after {
          top: veui-sum(
            @step-height / 2,
            @reserved-space,
            -@separator-width / 2
          );
          left: veui-sum(@step-height, @separator-gap-x);
        }
      }
      &[ui~='line'] {
        .@{veui-prefix}-steps-step {
          height: @veui-steps-line-step-height-s;
          &-index {
            width: @veui-steps-line-marker-size-s;
            height: @veui-steps-line-marker-size-s;
            font-size: @veui-steps-line-marker-size-s - @veui-height-unit;
          }
          &::before {
            top: 0;
            left: 0;
            right: auto;
            border-top: @veui-steps-line-step-height-s / 2 solid @veui-steps-line-step-background-color;
            border-bottom: @veui-steps-line-step-height-s / 2 solid @veui-steps-line-step-background-color;
            border-left: @veui-spacing-unit solid @veui-steps-line-background-color;
          }
          &::after {
            top: 0;
            left: auto;
            right: 0;
            border-top: @veui-steps-line-step-height-s / 2 solid @veui-steps-line-background-color;
            border-bottom: @veui-steps-line-step-height-s / 2 solid @veui-steps-line-background-color;
            border-left: @veui-spacing-unit solid @veui-steps-line-step-background-color;
          }
        }
      }
    }
    &[ui~="vertical"] {
      .@{veui-prefix}-steps-step {
        &-index::after {
          top: @step-height + @separator-gap-y;
          left: @step-height / 2;
        }
        &-connector-placeholder {
          margin-left: veui-sum(@step-height / 2, -@separator-width / 2);
        }
        &-connector {
          margin-left: veui-sum(@step-height / 2, -@separator-width / 2);
        }
      }
      &[ui~='simple'] {
        .@{veui-prefix}-steps-step {
          &-connector {
            margin-top: 0;
            margin-left: @veui-steps-simple-marker-size-current-s / 2;
          }
          &-completed,
          &-error,
          &-incomplete {
            .@{veui-prefix}-steps-step-content{
              @title-offsetY: veui-sum(@veui-steps-simple-marker-size-s, -@title-font-size * @veui-line-height-m) / 2;
              transform: translateY(@title-offsetY);
            }
            .@{veui-prefix}-steps-step-connector-placeholder {
              margin-left: @veui-steps-simple-marker-size-s / 2;
            }
          }
          &-current,
          &-error-current {
            .@{veui-prefix}-steps-step-content{
              @title-offsetY: veui-sum(@veui-steps-simple-marker-size-current-s, -@title-font-size * @veui-line-height-m) / 2;
              transform: translateY(@title-offsetY);
            }
            .@{veui-prefix}-steps-step-connector-placeholder {
              margin-left: @veui-steps-simple-marker-size-current-s / 2;
            }
          }
        }
      }
    }
    &[ui~='simple'] {
      .@{veui-prefix}-steps-step {
        &-completed,
        &-error,
        &-incomplete {
          .@{veui-prefix}-steps-step-index {
            width: @veui-steps-simple-marker-size-s;
            height: @veui-steps-simple-marker-size-s;
          }
          &::after {
            top: veui-sum(@veui-steps-simple-marker-size-s / 2, @reserved-space, -@separator-width / 2);
            left: veui-sum(@veui-steps-simple-marker-size-s, @separator-gap-x);
          }
        }
        &-current,
        &-error-current {
          .@{veui-prefix}-steps-step-index {
            width: @veui-steps-simple-marker-size-current-s;
            height: @veui-steps-simple-marker-size-current-s;
          }
          &::after {
            top: veui-sum(@veui-steps-simple-marker-size-s / 2, @reserved-space, -@separator-width / 2);
            left: veui-sum(@veui-steps-simple-marker-size-current-s, @separator-gap-x);
          }
        }
        &-connector {
          margin-top: veui-sum(@veui-steps-simple-marker-size-s / 2, -@separator-width / 2);
        }
        
      }
    }
  }
}