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

.euiStep {
  // 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 ($euiSize - 1),
                        $euiBorderColor ($euiSize - 1),
                        $euiBorderColor ($euiSize + 1),
                        transparent ($euiSize + 1),
                        transparent 100%
                      );
    background-repeat: no-repeat;
    background-position: left $euiSizeXXL;
  }

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

    .euiStep__content {
      // Align the content's contents with the title
      padding-left: ($euiStepNumberSmallSize / 2) + $euiStepNumberMargin;

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

.euiStep__titleWrapper {
  display: flex;
}

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

.euiStep__title {
  font-weight: $euiFontWeightMedium;
}

.euiStep__content {
  padding: $euiSize $euiSize $euiSizeXL;
  margin: $euiSizeS 0;

  // Align the content's contents with the title
  padding-left: ($euiStepNumberSize / 2) + $euiStepNumberMargin;

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