/*!
 * 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.
 */

@mixin makeLineProgress {
  height: 2px;
  background-color: $ouiColorPrimary;
}

/**
 * 1. Ensure the connecting lines stays behind the number
 * 2. Make each step the same width
 * 3. Make the content of each step align to the top, even if the steps are of varying heights,
 *    e.g. due to some of their titles wrapping to multiple lines
 */

.ouiStepsHorizontal {
  display: flex;
  align-items: stretch;
  background: transparentize($ouiColorLightestShade, .5);
}

.ouiStepHorizontal__item {
  flex-grow: 1; /* 2 */
  flex-basis: 0%; /* 2 */

  // Remove the respective lines if the first or last child
  &:first-of-type > .ouiStepHorizontal::before,
  &:last-of-type > .ouiStepHorizontal::after {
    display: none;
  }
}

// Button containing item
.ouiStepHorizontal {
  padding: $ouiSizeL $ouiSize $ouiSize;
  display: flex; /* 3 */
  flex-direction: column; /* 3 */
  align-items: center; /* 3 */
  justify-content: flex-start; /* 3 */
  cursor: pointer;
  position: relative;
  width: 100%;

  // focus & hover state
  &:focus:not(.ouiStepHorizontal-isDisabled),
  &:hover:not(.ouiStepHorizontal-isDisabled) {
    .ouiStepHorizontal__title {
      text-decoration: underline;
    }
  }

  &:focus:not(.ouiStepHorizontal-isDisabled) {
    outline: none;

    .ouiStepHorizontal__number {
      @include ouiFocusRing(large);
    }
  }

  // disabled state
  &.ouiStepHorizontal-isDisabled {
    cursor: not-allowed;
  }

  // create the connecting lines
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: calc(50% - #{$ouiStepNumberSize / 2});
    height: 1px;
    top: $ouiSizeL + ($ouiStepNumberSize / 2);
    background-color: $ouiColorLightShade;
    z-index: $ouiZLevel0; /* 1 */
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }
}

.ouiStepHorizontal__number {
  position: relative; /* 1 */
  z-index: $ouiZLevel0 + 1; /* 1 */
  transition: all $ouiAnimSpeedFast ease-in-out;
}

.ouiStepHorizontal__title {
  @include ouiTitle('xs');
  margin-top: $ouiSizeS;
  font-weight: $ouiFontWeightRegular;
  text-align: center;

  .ouiStepHorizontal-isDisabled & {
    color: $ouiColorDarkShade;
  }
}

// Complete state
.ouiStepHorizontal-isComplete {
  &::before,
  &::after {
    @include makeLineProgress;
  }
}

// Selected state
.ouiStepHorizontal-isSelected {
  .ouiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) {
    @include ouiSlightShadow(desaturate($ouiColorPrimary, 20%));
  }

  &::before {
    @include makeLineProgress;
  }
}

// RESPONSIVE
@include ouiBreakpoint('xs', 's') {
  .ouiStepHorizontal {
    // reduce top padding and shift lines
    padding-top: $ouiSize;

    &::before,
    &::after {
      top: $ouiSize + $ouiStepNumberSize / 2;
    }
  }

  // hide titles
  .ouiStepHorizontal__title {
    display: none;
  }
}