@import './item.less';

@steps-prefix: ~'@{icecream-prefix}-steps';

.@{steps-prefix} {
  .extendBase();
  display: flex;
  color: @icecream-color-grey-10;
  width: 100%;
  font-size: 0;

  &-horizontal {
    .@{steps-item-prefix} {
      &-tail {
        top: 12px;
        left: 0;
        width: 100%;
        height: 1px;
        margin-left: 86px;

        &::after {
          width: calc(100% - 32px);
        }
      }

      &-icon {
        margin-left: 58px;
      }

      &-content {
        margin-top: 12px;
        text-align: center;
        width: 140px;
      }
    }
  }

  &-vertical {
    flex-direction: column;

    .@{steps-item-prefix} {
      display: block;

      &:last-child {
        .@{steps-item-prefix}-container {
          padding-bottom: 0;
        }
      }

      &-container {
        padding-bottom: 20px;
      }

      &-tail {
        top: 0;
        left: 12px;
        width: 1px;
        height: 100%;
        box-sizing: border-box;
        padding: 29px 0 5px;

        &::after {
          width: 1px;
          height: 100%;
        }
      }

      &-icon {
        float: left;
        margin: 0;
      }

      &-content {
        min-height: 48px;
        margin-left: 36px;
      }

      &-title {
        line-height: 24px;
      }
    }
  }

  &-clickable {
    .@{steps-item-prefix}:not(.@{steps-item-prefix}-process) {
      cursor: pointer;

      &.@{steps-item-prefix}-wait:hover {
        .@{steps-item-prefix}-icon {
          border-color: @icecream-color-blue-6;
          color: @icecream-color-blue-6;
        }
      }
    }
  }

  &-label-placement-right {
    .@{steps-item-prefix} {
      overflow: hidden;
      display: inline-block;
      padding-left: 5px;

      &:first-child {
        padding-left: 0;
      }

      &:last-child .@{steps-item-prefix}-title {
        padding-right: 0;

        &::after {
          display: none;
        }
      }

      &-tail {
        display: none;
      }

      &-icon {
        margin: 0 8px 0 0;
      }

      &-container {
        white-space: nowrap;
      }

      &-content {
        display: inline-block;
        width: auto;
        text-align: left;
        margin-top: 0;
        line-height: 24px;
        vertical-align: top;
      }

      &-title {
        display: inline-block;
        padding-right: 4px;

        &::after {
          display: block;
          width: 9999px;
          height: 1px;
          position: absolute;
          top: 50%;
          left: 100%;
          background-color: @icecream-color-grey-7;
          transition: background-color @icecream-transitions;
          content: "";
        }
      }

      &-finish .@{steps-item-prefix}-title::after {
        background-color: @icecream-color-blue-6;
      }

      &-description {
        display: none;
      }
    }
  }
}