@use '../abstract';

.cds-progress-steps {
  &__item:last-child {
    .cds-step__icon-wrap::after {
      content: none;
    }
    .cds-step__content {
      margin-bottom: 0;
    }
  } // item

  @include abstract.media-bp-up('md') {
    display: flex;
    justify-content: center;
    max-width: 992px;
    margin-left: auto;
    margin-right: auto;

    &__item {
      flex: 1;
    }

    .cds-step {
      flex-direction: column;
      text-align: center;

      &__icon-wrap {
        @include abstract.relative();

        &::before,
        &::after {
          @include abstract.absolute($top: 50%);
          content: '';

          width: 50%;
          transform: translateY(-50%);
          height: 2px;
          background-color: var(--gray-400);
          border: 0;
        } // before, after

        &::before {
          left: 0;
        }

        &::after {
          right: 0;
        }
      }

      &__icon {
        @include abstract.relative();

        z-index: 5;
        box-shadow: var(--shadow-xs);
      } // icon
    } //step

    &__item:first-child .cds-step__icon-wrap::before {
      content: none;
    }
  } // md
}