@use '_variables';
@use '_mixins';

$grey-color: #9CA3AB;
$index-block-height: 32px;

.container {
  @include padding-left(0);
  @include padding-right(0);
  max-width: unset !important;
}

header {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 30px;

  .step-info {
    color: $grey-color;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: $index-block-height;

    &:not(.c-hand) {
      cursor: default;
    }

    .step-index {
      display: flex;
      justify-content: center;
      align-items: center;
      width: $index-block-height;
      height: $index-block-height;
      border-radius: 100px;
      border: 2px solid $grey-color;
      margin-bottom: 10px;

      my-global-icon {
        @include apply-svg-color(pvar(--mainBackgroundColor));

        width: 22px;
        height: 22px;
      }
    }

    .step-label {
      width: max-content;
    }

    &.active,
    &.completed {
      .step-index {
        border-color: pvar(--mainColor);
        background-color: pvar(--mainColor);
        color: pvar(--mainBackgroundColor);
      }

      .step-label {
        color: pvar(--mainColor);
      }
    }

    &.completed {
      cursor: pointer;
    }
  }

  .connector {
    flex: auto;
    margin: $index-block-height/2 10px 0 10px;
    height: 2px;
    background-color: $grey-color;
  }
}