@use '../base/token';
@use '../abstract';

.cds-step {
  // @include abstract.debug();
  display: flex;
  gap: 16px;

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

    &::after {
      content: '';
      width: 2px;
      height: 100%;
      background-color: var(--gray-100);
      border: solid var(--base-white);
      border-width: 4px 0 0;
    }
  }

  &__icon {
    flex: none;
    box-shadow: 0 0 0 2px var(--base-white), var(--shadow-xs);
  }

  &__content {
    margin-bottom: 32px;
  }

  &__tit {
    display: block;
    color: var(--gray-600);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    white-space: pre-wrap;
  }

  &__desc {
    white-space: pre-wrap;
    color: var(--gray-400);
  }

  &__desc--highlight-text {
    color: var(--secondary-gray-blue-450);
  }

  @include abstract.media-bp-up('md') {
    &__content {
      margin-bottom: 0;
    }
  }
}