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

.@{steps-item-prefix} {
  position: relative;
  display: inline-block;
  flex: 1;

  &:last-child {
    flex: none;

    .@{steps-item-prefix}-tail {
      display: none;
    }
  }

  &-container {
    outline: none;
  }

  &-tail {
    position: absolute;

    &::after {
      display: inline-block;
      width: 100%;
      height: 1px;
      background-color: @icecream-color-grey-7;
      transition: background-color @icecream-transitions;
      content: "";
    }
  }

  &-icon {
    display: inline-block;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    text-align: center;
    border-radius: 50%;
    color: @icecream-color-grey-9;
    border: 1px solid @icecream-color-grey-7;

    &-inner {
      font-size: @icecream-font-size-main;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 22px;
    }
  }

  &-title {
    position: relative;
    font-size: @icecream-font-size-main;
    font-weight: @icecream-bold;
  }

  &-description {
    font-size: @icecream-font-size-sm;
  }

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

      &-icon {
        background-color: @icecream-color-blue-6;
        border-color: @icecream-color-blue-6;
        color: @icecream-color-grey-1;
      }
    }
  }

  &-error {
    .@{steps-item-prefix}-icon {
      background-color: @icecream-color-red-6;
      border-color: @icecream-color-red-6;
      color: @icecream-color-grey-1;
    }
  }

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

  &-wait {
    .@{steps-item-prefix}-content {
      color: @icecream-color-grey-8;
    }
  }
}