/**
 * Steps Style
 */


.at-steps {
  font-size: 0;

  /* modifier */
  &--small {
    .at-step__label {
      width: $step-label-size-sm;
      height: $step-label-size-sm;
      font-size: $step-font-size-sm;
      line-height: $step-label-size-sm - 2;
    }
    .at-step__title {
      font-size: $step-font-size-sm;
      line-height: $step-label-size-sm;
    }
    .at-step__line {
      top: ($step-label-size-sm - 2) / 2;
    }

    &.at-steps--vertical {
      .at-step__main {
        min-height: $step-main-height-vertical-sm;
      }
    }
  }
  &--vertical {
    .at-step {
      display: block;

      /* element */
      &__line {
        margin: 0;
        left: ($step-label-size - 2) / 2 + 8;
        top: 0;
        bottom: 2px;
        width: 1px;
        height: auto;

        &::before, &::after {
          position: absolute;
          top: 0px;
          width: 100%;
        }
        &::after {
          height: 0;
        }
      }
      &__head {
        padding-bottom: 2px;
      }
      &__main {
        min-height: $step-main-height-vertical;
      }

      /* modifier */
      &.at-step--finish {
        .at-step__line::after {
          height: 100%;
        }
      }
    }

    &.at-steps--small {
      .at-step__line {
        left: 8px;
      }
    }
  }
}

.at-step {
  position: relative;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;

  /* element */
  &__head, &__main {
    position: relative;
    font-size: $step-font-size;
  }
  &__head {
    position: relative;
    display: inline-block;
    vertical-align: top;
    background-color: $step-bg-color;
  }
  &__label {
    margin-right: 8px;
    width: $step-label-size;
    height: $step-label-size;
    color: $step-color;
    line-height: $step-label-size - 2;
    text-align: center;
    border: 1px solid $step-border-color;
    border-radius: 50%;
    margin-left: 8px;
    transition: all .3s ease-in-out;

    @at-root.at-step--process &:not(.at-step__icon) {
      color: $step-color-active;
      border-color: $step-border-color-active;
      background-color: $step-bg-color-active;
    }

    @at-root.at-step--process &.at-step__icon {
      color: $step-icon-color-active;
    }

    @at-root.at-step--finish & {
      color: $step-icon-color-active;
      border-color: $step-border-color-active;

      &.at-step__icon {
        border-color: transparent;
      }
    }

    @at-root.at-step--error & {
      color: $step-icon-color-error;
      border-color: $step-border-color-error;
    }
  }
  &__line {
    position: absolute;
    left: 0;
    right: 0;
    top: ($step-label-size - 2) / 2;
    width: calc(100% - 40px);
    margin: 0 10px;
    height: 1px;

    @at-root.at-step--finish &::after {
      width: 100%;
    }

    @at-root.at-step--next-error &::after {
      width: 100%;
      background-color: $step-bg-color-error;
    }

    &::before, &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
    }
    &::before {
      background-color: $step-line-color;
    }
    &::after {
      width: 0;
      background-color: $step-line-color-active;
      transition: all .3s;
    }
  }
  &__main {
    display: inline-block;
    width: calc(100% - 40px);
    vertical-align: top;
    white-space: normal;
    overflow: hidden;
  }
  &__title {
    display: inline-block;
    padding-right: 8px;
    max-width: 80%;
    color: $step-text-color;
    font-weight: bold;
    line-height: $step-label-size;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: $step-bg-color;
    overflow: hidden;

    @at-root.at-step--process & {
      color: $step-color-process;
    }

    @at-root.at-step--error & {
      color: $step-color-error;
    }
  }
  &__description {
    color: $step-text-color;
    font-size: $step-description-font-size;
    word-wrap: break-word;

    @at-root.at-step--process & {
      color: $step-color-process;
    }

    @at-root.at-step--error & {
      color: $step-color-error;
    }
  }
  &__icon {
    font-size: $step-label-size - 2;
    border-color: transparent;
    background-color: $color-white;
  }
  &__title, &__description, &__icon {
    transition: all .3s ease-in-out;
  }
}