@import "../lib.less";

.@{veui-prefix}-steps {
  @step-height: @dls-steps-marker-size-m;
  @title-font-size: @dls-steps-title-font-size-m;
  @title-height: dls-line-height(@dls-line-height-1, @title-font-size);
  @desc-font-size: @dls-steps-desc-font-size-m;
  @marker-font-size: @dls-steps-marker-font-size-m;
  @separator-gap-x: @dls-steps-connector-spacing-horizontal;
  @separator-gap-y: @dls-steps-connector-spacing-vertical;
  @separator-width: 1px;
  @border-width: 1px;
  @min-step-connector-width: 16px;
  @min-safe-connector-width: 8px;
  @reserved-space: @dls-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;

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

    &-index {
      flex-grow: 0;
      flex-shrink: 0;
      .size(@step-height);
      .make-index(completed);
      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 {
        .dls-icon-size(@dls-steps-marker-icon-size);
      }
    }

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

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

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

    &-desc {
      .margin(@dls-steps-title-spacing, _, 0);
      color: @dls-steps-desc-font-color;
      font-size: @desc-font-size;
      max-width: @dls-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: @dls-steps-connector-color-completed;
      }
      &-current {
        background-color: @dls-steps-connector-color-current;
      }
      &-incomplete {
        background-color: @dls-steps-connector-color-incomplete;
      }
      &-error {
        background-color: @dls-steps-connector-color-error;
      }
      &-error-current {
        background-color: @dls-steps-connector-color-error-current;
      }
    }

    &-completed {
      &::before {
        background-color: @dls-steps-connector-color-completed;
      }

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

    &-current {
      &::before {
        background-color: @dls-steps-connector-color-current;
      }

      .@{veui-prefix}-steps-step-index {
        .make-index(current);
      }

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

    &-incomplete {
      &::before {
        background-color: @dls-steps-connector-color-incomplete;
      }
      .@{veui-prefix}-steps-step {
        &-index {
          .make-index(incomplete);
        }
        &-label {
          color: @dls-steps-title-font-color-incomplete;
        }
        &-desc {
          color: @dls-steps-desc-font-color-incomplete;
        }
      }
    }

    &-error {
      &::before {
        background-color: @dls-steps-connector-color-error;
      }
      .@{veui-prefix}-steps-step-index {
        .make-index(error);
      }

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

    &-error-current {
      &::before {
        background-color: @dls-steps-connector-color-error-current;
      }
      .@{veui-prefix}-steps-step-index {
        .make-index(error-current);
      }

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

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

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

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

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

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

  a.@{veui-prefix}-steps {
    &-step {
      &:hover {
        .@{veui-prefix}-steps-step-label {
          color: @dls-steps-title-font-color-hover;
        }
      }

      &:active {
        .@{veui-prefix}-steps-step-label {
          color: @dls-steps-title-font-color-active;
        }
      }

      &-completed {
        &:hover {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-color-completed-hover;
          }
        }

        &:active {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-color-completed-active;
          }
        }
      }

      &-current {
        &:hover {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-color-current-hover;
          }
        }

        &:active {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-color-current-active;
          }
        }
      }

      &-incomplete {
        &:hover {
          .@{veui-prefix}-steps-step-label {
            color: @dls-steps-title-font-color-incomplete;
          }
        }

        &:active {
          .@{veui-prefix}-steps-step-label {
            color: @dls-steps-desc-font-color-incomplete;
          }
        }
      }

      &-error {
        &:hover {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-color-error-hover;
          }
        }

        &:active {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-color-error-active;
          }
        }
      }

      &-error-current {
        &:hover {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-color-error-current-hover;
          }
          .@{veui-prefix}-steps-step-label {
            color: @dls-color-gray-8;
          }
        }

        &:active {
          .@{veui-prefix}-steps-step-index {
            background-color: @dls-steps-marker-background-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(@min-step-connector-width, @separator-width);
    content: "";
    pointer-events: none;
  }

  .make-index(@status) {
    @border-color: ~"dls-steps-marker-border-color-@{status}";
    @color: ~"dls-steps-marker-foreground-color-@{status}";
    @background-color: ~"dls-steps-marker-background-color-@{status}";

    border: @border-width solid @@border-color;
    color: @@color;
    background-color: @@background-color;
  }

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

      &-content {
        padding-left: 0;
      }

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

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

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

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

      &:first-child::before,
      &:last-child::after {
        display: none;
      }
    }
  }

  &[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: dls-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: dls-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~="s"] {
    @step-height: @dls-steps-marker-size-s;
    @title-font-size: @dls-steps-title-font-size-s;
    @title-height: dls-line-height(@dls-line-height-1, @title-font-size);
    @desc-font-size: @dls-steps-desc-font-size-s;
    @marker-font-size: @dls-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 {
          margin-top: dls-sum(@step-height / 2, -@title-height / 2);
          font-size: @title-font-size;

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

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

    &[ui~="label-vertical"] {
      .@{veui-prefix}-steps-step {
        &-connector {
          margin-top: dls-sum(@step-height / 2, -@separator-width / 2);
        }
        &::after {
          top: dls-sum(
            @step-height / 2,
            @reserved-space,
            -@separator-width / 2
          );
          left: dls-sum(50%, @step-height / 2, @separator-gap-x);
        }

        &::before {
          top: dls-sum(
            @step-height / 2,
            @reserved-space,
            -@separator-width / 2
          );
          right: dls-sum(50%, @step-height / 2, @separator-gap-x);
        }
      }
    }
    &[ui~="vertical"] {
      .@{veui-prefix}-steps-step {
        &-index::after {
          top: @step-height + @separator-gap-y;
          left: @step-height / 2;
        }
        &-connector-placeholder {
          margin-left: dls-sum(@step-height / 2, -@separator-width / 2);
        }
        &-connector {
          margin-left: dls-sum(@step-height / 2, -@separator-width / 2);
        }
      }
    }
  }
}