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

.ouiStepNumber {
  @include createStepsNumber;

  .ouiStepNumber__icon {
    vertical-align: middle;
    position: relative;
    top: -2px;
  }

  &--small {
    @include createStepsNumber($ouiStepNumberSmallSize, $ouiFontSizeXS);

    .ouiStepNumber__icon {
      top: -1px;
    }
  }

  &--complete {
    // Thicken the checkmark by adding a slight stroke.
    .ouiStepNumber__icon {
      stroke: currentColor;
      stroke-width: .5px;
    }
  }

  @include ouiCanAnimate {
    &--complete,
    &--warning,
    &--danger {
      animation: ouiGrow $ouiAnimSpeedFast $ouiAnimSlightBounce;
    }
  }

  &--loading {
    background: transparent;
  }

  &.ouiStepNumber-isHollow {
    background-color: transparent;
    border: 2px solid $ouiColorPrimary;

    .ouiStepNumber__number {
      display: none;
    }
  }

  // Create modifiers based upon the map
  @each $name, $color in $ouiStepStatusColorsToFade {
    &--#{$name} {
      $backgroundColor: $color;
      @if (saturation($color) > 0%) {
        $backgroundColor: tintOrShade($color, 90%, 70%);
      }

      $textColor: makeHighContrastColor($color, $backgroundColor);

      color: $textColor;
      background-color: $backgroundColor;
    }
  }
}