@use './variables' as *;

.#{$component-prefix}step {
  position: relative;
  flex: 1;
  font-size: $step-font-size;
  color: $step-color;

  &__circle {
    display: block;
    width: $step-circle-width;
    height: $step-circle-height;
    margin: $step-circle-margin;
    background: $step-circle-background-color;
    border-radius: $step-circle-border-radius;
  }

  &__line {
    position: absolute;
    background: $step-line-background-color;
    transition: background-color $step-line-transition-duration;
  }

  &--horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;

    &:last-child {
      .#{$component-prefix}step__line {
        width: 0;
      }
    }

    .#{$component-prefix}step__circle-container {
      z-index: 2;
      padding: 0 var(--padding-xs, $padding-xs);
      margin-top: 8px * $hd;
      background: $white;
    }

    .#{$component-prefix}step__circle {
      position: relative;
      bottom: 1px;
    }

    .#{$component-prefix}step__label {
      display: inline-block;
      font-size: $step-horizontal-title-font-size;

      @media (max-width: 321px) {
        font-size: var(--step-horizontal-title-font-size, $step-horizontal-title-font-size) - 1px * $hd;
      }
    }

    .#{$component-prefix}step__line {
      bottom: 5px * $hd + 1px;
      left: 50%;
      width: 100%;
      height: 1px * $hd;
    }

    .#{$component-prefix}step__icon {
      display: block;
      font-size: $step-icon-font-size;
    }

    .#{$component-prefix}step--process {
      color: $step-process-color;
    }
  }

  &--alternative-label {
    flex-direction: column-reverse;

    .#{$component-prefix}step__circle-container {
      margin-top: 0;
    }

    .#{$component-prefix}step__circle {
      bottom: 0;
    }

    .#{$component-prefix}step__label {
      margin-top: 8px * $hd;
    }

    .#{$component-prefix}step__line {
      top: 5px * $hd + 1px;
      bottom: 0;
    }
  }

  &--vertical {
    display: block;
    float: none;
    padding: $step-vertical-padding;
    line-height: $step-vertical-line-height;

    &:not(:last-child)::after {
      border-bottom-width: 1px * $hd;
    }

    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: -16px * $hd;
        z-index: 1;
        width: 1px * $hd;
        height: 20px * $hd;
        content: '';
        background: var(--white, $white);
      }
    }

    .#{$component-prefix}step__circle-container {
      position: absolute;
      top: 19px * $hd;
      left: -16px * $hd;
      z-index: 2;
      font-size: $step-icon-font-size;
      line-height: 1;
      transform: translate(-50%, -50%);
    }

    .#{$component-prefix}step__line {
      top: 16px * $hd;
      left: -16px * $hd;
      width: 1px * $hd;
      height: 100%;
    }

    &:last-child {
      .#{$component-prefix}step__line {
        width: 0;
      }
    }
  }

  &--completed {
    color: $step-completed-color;

    .#{$component-prefix}step__circle,
    .#{$component-prefix}step__line {
      background: $step-completed-line-background-color;
    }

    .#{$component-prefix}step__icon {
      color: $step-active-color;
    }
  }

  &--active {
    color: $step-completed-color;

    .#{$component-prefix}step__circle {
      background: $step-active-color;
    }

    .#{$component-prefix}step__icon,
    .#{$component-prefix}step__label {
      color: $step-active-color;
    }
  }

  &__icon,
  &__label {
    transition: color $animation-duration-base;
  }
}