/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
@import '../custom.less';
@import './vars.less';

@wizard-prefix-cls: ~'@{css-prefix}wizard';
@button-prefix-cls: ~'@{css-prefix}button';
@user-contact-prefix-cls: ~'@{css-prefix}user-contact';
@user-head-prefix-cls: ~'@{css-prefix}user-head';
@svg-prefix-cls: ~'@{css-prefix}svg';
@svg-wrapper-prefix-cls: ~'@{css-prefix}wizard__chart-svg';

/** 节点圆圈场景 */
.wizard-icon-color(@color, @bgColor, @borderColor) {
  color: @color;
  background: @bgColor;
  border: 1px solid @borderColor;
}

/** 线条场景 */
.wizard-line-color(@color) {
  background: @color;
  border-color: @color;
}

.@{wizard-prefix-cls} {
  .inject-Wizard-vars();

  // 水平模式场景
  & &__normal {
    .@{wizard-prefix-cls}__steps {
      display: flex;
      align-items: flex-start;

      &-item {
        &:first-child {
          .@{wizard-prefix-cls}__chart-line:first-child {
            .wizard-line-color(var(--tv-Wizard-first-lines-bg-color));
          }
        }

        &:last-child {
          .@{wizard-prefix-cls}__chart-line:last-child {
            .wizard-line-color(var(--tv-Wizard-last-lines-bg-color));
          }
        }
      }
    }

    .@{wizard-prefix-cls}__chart span {
      display: inline-block;
    }

    .@{wizard-prefix-cls}__name {
      margin-top: var(--tv-Wizard-node-title-margin-top);
      overflow: hidden;
      text-align: center;

      .name {
        width: 100%;
        font-size: var(--tv-Wizard-font-size);
      }
    }

    .@{wizard-prefix-cls}__button {
      margin-top: var(--tv-Wizard-button-group-margin-top);
      text-align: left;

      .@{button-prefix-cls} + .@{button-prefix-cls} {
        margin-left: var(--tv-Wizard-button-margin-left);
      }
    }
  }

  // 垂直模式场景
  & &__vertical {
    padding-top: 20px;
    padding-left: 20px;

    .@{wizard-prefix-cls} {
      &__steps-item {
        &.is-doing {
          .@{wizard-prefix-cls}__chart-icon {
            .wizard-icon-color(
              var(--tv-Wizard-icon-color),
              var(--tv-Wizard-icon-bg-color),
              var(--tv-Wizard-icon-border-color)
            );

            .@{wizard-prefix-cls}__chart-line {
              &,
              &.is-time-line {
                .wizard-line-color(var(--tv-Wizard-icon-bg-color));
              }
            }
          }

          .@{wizard-prefix-cls}__chart-line {
            .wizard-line-color(var(--tv-Wizard-right-lines-doing-bg-color));
          }

          .@{wizard-prefix-cls}__chart-name > .name {
            font-weight: var(--tv-Wizard-node-doing-font-weight);
          }
        }

        &:last-child > ul .@{wizard-prefix-cls}__chart-line {
          background: none;
        }

        &:last-child > .@{wizard-prefix-cls}__node-wrapper > .@{wizard-prefix-cls}__chart-line {
          .wizard-line-color(var(--tv-Wizard-last-lines-bg-color));
        }

        .@{wizard-prefix-cls}__node-wrapper {
          height: var(--tv-Wizard-vertical-node-box-height);
        }

        &:not(.is-ready, .is-doing) {
          .@{wizard-prefix-cls}__chart-name .name {
            color: var(--tv-Wizard-vertical-wait-desc-text-color);
          }
        }
      }

      &__chart-line {
        height: var(--tv-Wizard-vertical-line-height);
        width: var(--tv-Wizard-vertical-line-width);
        top: var(--tv-Wizard-vertical-line-position-top);
        position: relative;
        display: inline-block;
      }

      &__chart-name {
        position: relative;
        top: -15px;
        transform: translateY(-50%);
        margin-left: var(--tv-Wizard-vertical-text-margin-left);
        display: inline-flex;
        font-size: var(--tv-Wizard-vertical-title-font-size);
        flex-direction: column;

        .name {
          color: var(--tv-Wizard-node-text-color);
          line-height: var(--tv-Wizard-vertical-title-line-height);
        }

        .children-name {
          color: var(--tv-Wizard-vertical-desc-text-color);
          font-size: var(--tv-Wizard-vertical-desc-font-size);
          margin-top: var(--tv-Wizard-vertical-desc-margin-top);
          line-height: var(--tv-Wizard-vertical-title-line-height);
        }
      }

      &__chart-icon {
        position: var(--tv-Wizard-vertical-icon-position);
        left: 50%;
        top: var(--tv-Wizard-vertical-icon-position-top);
        transform: translateX(-50%);
      }

      &__time-wrapper {
        position: relative;
        left: 50%;
        top: -14px;
        transform: translateX(-50%);
        fill: var(--tv-Wizard-time-node-icon-color);
        font-size: 24px;
        box-sizing: border-box;
        width: var(--tv-Wizard-time-node-size);
        height: var(--tv-Wizard-time-node-size);
        display: flex;
        border-radius: 50%;
        text-align: center;
        background: var(--tv-Wizard-time-node-bg-color);
        border: var(--tv-Wizard-time-node-border-weight) solid var(--tv-Wizard-icon-bg-color);
        justify-content: center;

        .@{svg-prefix-cls} {
          width: var(--tv-Wizard-time-node-icon-width);
          height: var(--tv-Wizard-time-node-icon-height);
        }
      }

      &__chart-children {
        position: relative;

        .children-name {
          position: absolute;
          margin-left: 15px;
        }
      }
    }
  }

  // 垂直模式时间线场景
  & &__vertical.is-time-line-flow {
    .@{wizard-prefix-cls} {
      &__node-wrapper {
        height: auto;
      }

      &__steps-item {
        & > ul .@{wizard-prefix-cls}__chart-line {
          .wizard-line-color(var(--tv-Wizard-time-lines-bg-color));
        }

        &:last-child > ul .@{wizard-prefix-cls}__chart-line {
          background: var(--tv-Wizard-time-last-lines-bg-color);
        }

        .@{wizard-prefix-cls}__chart-line {
          top: 0px;
          margin-left: 0;
          height: 88px;

          &.is-time-line {
            .wizard-line-color(var(--tv-Wizard-time-lines-bg-color));
          }
        }
      }

      &__chart-icon {
        position: relative;
        top: -14px;
      }

      // 时间线节点开始时的线条样式
      & &__chart-children.is-ready .@{wizard-prefix-cls}__chart-line {
        .wizard-line-color(var(--tv-Wizard-icon-bg-color));
      }
    }
  }

  // 垂直模式时间线日期场景
  & &__date {
    position: relative;
    top: var(--tv-Wizard-time-left-position-top);
    right: 15px;
    margin-right: var(--tv-Wizard-time-left-margin-right);
    min-width: var(--tv-Wizard-time-left-min-width);
    width: auto;
    color: var(--tv-Wizard-text-color);
    font-size: var(--tv-Wizard-font-size);
    line-height: var(--tv-Wizard-time-left-line-height);
    display: inline-block;
    text-align: right;

    .date-icon {
      margin-left: var(--tv-Wizard-time-left-icon-margin-left);
      margin-right: var(--tv-Wizard-time-left-icon-margin-right);
      font-size: var(--tv-Wizard-time-left-icon-size);
      fill: var(--tv-Wizard-time-left-icon-color);
    }

    span {
      vertical-align: middle;
    }

    &.time-line-text {
      top: var(--tv-Wizard-time-left-point-position-top);
      font-weight: var(--tv-Wizard-node-doing-font-weight);
    }
  }

  // 全局节点样式
  & &__steps-item {
    &.is-ready {
      .name {
        color: var(--tv-Wizard-node-text-color);
      }

      .@{wizard-prefix-cls}__chart-icon {
        .wizard-icon-color(
          var(--tv-Wizard-icon-color),
          var(--tv-Wizard-icon-bg-color),
          var(--tv-Wizard-icon-border-color)
        );
      }

      .@{wizard-prefix-cls}__chart-line {
        .wizard-line-color(var(--tv-Wizard-lines-bg-color));
      }
    }

    ul {
      list-style: none;
    }
  }

  // 全局节点（不包含文字场景）
  & &__chart {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    & > .@{svg-wrapper-prefix-cls} {
      height: var(--tv-Wizard-node-size);

      & > .@{svg-prefix-cls} {
        font-size: var(--tv-Wizard-node-size);
        fill: var(--tv-Wizard-node-text-color);
      }
    }
  }

  // 全局节点和时间线节点的共同样式
  & &__steps-item,
  & &__chart-children {
    &.is-ready,
    &.is-doing {
      .@{wizard-prefix-cls}__chart-icon {
        .wizard-icon-color(
          var(--tv-Wizard-icon-color),
          var(--tv-Wizard-icon-bg-color),
          var(--tv-Wizard-icon-border-color)
        );
      }
    }

    &.is-doing .@{wizard-prefix-cls}__name .name {
      font-weight: var(--tv-Wizard-node-doing-font-weight);
    }

    &.is-doing .@{wizard-prefix-cls}__chart-line {
      .wizard-line-color(var(--tv-Wizard-lines-bg-color));

      &:last-child {
        background-color: var(--tv-Wizard-right-lines-doing-bg-color);
      }
    }
  }

  // 时间线节点标题样式
  & &__chart-detail {
    padding: var(--tv-Wizard-time-right-padding-vertical) 8px;
    border-radius: 2px;
    border-radius: var(--tv-Wizard-detail-border-radius, 2px);
    min-height: 26px;
    height: auto;
    line-height: 1;
    margin-left: var(--tv-Wizard-time-right-margin-left);
    text-align: var(--tv-Wizard-time-right-text-align);
    display: inline-block;
    position: absolute;
    top: -14px;

    &:hover {
      background: var(--tv-Wizard-detail-bg-color);

      &::before {
        content: '';
        width: 0;
        height: 0;
        margin-top: -4px;
        border-style: solid;
        border-width: 4px 4px 4px 0;
        border-color: transparent var(--tv-Wizard-detail-bg-color);
        position: absolute;
        left: -4px;
        top: 10px;
      }

      .detail-title,
      .@{user-contact-prefix-cls}__role {
        color: var(--tv-Wizard-icon-color);
      }
    }

    .detail-title {
      color: var(--tv-Wizard-text-color);
      font-size: var(--tv-Wizard-font-size);
      font-weight: 700;
      margin-bottom: var(--tv-Wizard-time-right-title-margin-bottom);
      line-height: var(--tv-Wizard-vertical-title-line-height);
    }
  }

  // 默认节点圆圈样式
  & &__chart-icon {
    width: var(--tv-Wizard-node-size);
    height: var(--tv-Wizard-node-size);
    line-height: var(--tv-Wizard-node-size);
    border-radius: 50%;
    font-size: var(--tv-Wizard-font-size);
    text-align: center;
    background: var(--tv-Wizard-chart-icon-bg-color);
    color: var(--tv-Wizard-normal-icon-color);
    // 垂直简易流程图加
    display: inline-block;
    border: var(--tv-Wizard-lines-normal-border-weight) solid var(--tv-Wizard-lines-normal-border-color);

    &.time-line-icon {
      width: var(--tv-Wizard-time-dot-size);
      height: var(--tv-Wizard-time-dot-size);
      line-height: var(--tv-Wizard-time-dot-size);
    }
  }

  // 时间线小圆形节点背景色
  & &__chart-children &__chart-line &__chart-icon.time-line-icon {
    background-color: var(--tv-Wizard-time-lines-bg-color);
  }

  & &__chart-icon,
  & &__chart-name,
  & &__date,
  .@{svg-prefix-cls} {
    cursor: pointer;
  }

  // 节点线样式
  & &__chart-line {
    height: 1px;
    background: var(--tv-Wizard-lines-normal-bg-color);
    width: var(--tv-Wizard-lines-width);

    &:first-child {
      margin-right: var(--tv-Wizard-lines-margin-horizontal);
    }

    &:last-child {
      margin-left: var(--tv-Wizard-lines-margin-horizontal);
    }
  }

  // 时间线联系人信息
  .@{user-contact-prefix-cls} {
    .dropdown-part .@{user-head-prefix-cls},
    .@{svg-prefix-cls} {
      display: none;
    }

    .@{user-contact-prefix-cls}__role span {
      display: inline-block;
    }
  }
}