/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 1. Ensure that the step number vertically aligns with the title text
 */

.ouiStep {
  // sass-lint:disable indentation
  // Create border on all but the last step
  &:not(:last-of-type) {
    background-image: linear-gradient(
                        to right,
                        transparent 0,
                        transparent ($ouiSize - 1),
                        $ouiBorderColor ($ouiSize - 1),
                        $ouiBorderColor ($ouiSize + 1),
                        transparent ($ouiSize + 1),
                        transparent 100%
                      );
    background-repeat: no-repeat;
    background-position: left $ouiSizeXXL;
  }

  &--small {
    &:not(:last-of-type) {
      background-position: left -#{$ouiSizeXS} top $ouiSizeXL;
    }

    .ouiStep__content {
      // Align the content's contents with the title
      padding-left: calc($ouiStepNumberSmallSize / 2) + $ouiStepNumberMargin;

      // Align content border to horizontal center of step number
      margin-left: calc($ouiStepNumberSmallSize / 2);
    }
  }
}

.ouiStep__titleWrapper {
  display: flex;
}

.ouiStep__circle {
  flex-shrink: 0;
  margin-right: $ouiStepNumberMargin;
  vertical-align: top; /* 1 */
}

.ouiStep__title {
  font-weight: $ouiFontWeightMedium;
}

.ouiStep__content {
  padding: $ouiSize $ouiSize $ouiSizeXL;
  margin: $ouiSizeS 0;

  // Align the content's contents with the title
  padding-left: calc($ouiStepNumberSize / 2) + $ouiStepNumberMargin;

  // Align content border to horizontal center of step number
  margin-left: calc($ouiStepNumberSize / 2);
}