/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
  * Initialize Progress Indicator
 */
.slds-progress {
  position: relative;
  max-width: 70%;
  width: 100%;
  flex: 1 1 auto;
  margin: auto;

  .slds-progress-bar {
    position: absolute;
    inset-block-start: 50%;
    margin-block-start: -0.0625rem;
    background-color: var(--slds-g-color-neutral-base-50);
  }
}

/**
  * When on a shaded background such as the modal footer
*/
.slds-progress_shade {
  .slds-progress__item.slds-is-completed .slds-progress__marker,
  .slds-progress__item.slds-is-active .slds-progress__marker {
    background-color: var(--slds-g-color-surface-container-2);
  }

  .slds-progress__item.slds-is-completed .slds-progress__marker_icon {
    border-color: var(--slds-g-color-surface-container-2);
  }

  .slds-progress__item.slds-is-active .slds-progress__marker {
    box-shadow: var(--slds-g-color-surface-container-2) 0 0 0 var(--slds-g-sizing-2);
  }

  .slds-progress__item.slds-is-active .slds-progress__marker:focus-visible {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
  }

  .slds-progress__item.slds-has-error .slds-progress__marker,
  .slds-progress__item.slds-has-error .slds-progress__marker:hover,
  .slds-progress__item.slds-has-error .slds-progress__marker:focus {
    background-color: var(--slds-g-color-surface-container-2);
  }

  .slds-progress__item .slds-progress__marker {
    border-color: var(--slds-g-color-surface-container-2);
  }
}

/**
 * An ordered list containing steps of a process
 */
.slds-progress__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  margin: auto;
  position: relative;
  z-index: 1;
}

/**
 * A list item for each step of the process
 */
.slds-progress__item {
  display: inline-flex;
  align-self: center;

  &.slds-is-completed .slds-progress__marker,
  &.slds-is-active .slds-progress__marker {
    background-color: var(--slds-g-color-surface-container-1);
    border-color: var(--slds-g-color-accent-container-1);
  }

  /**
   * Stateful class for a completed step, `.slds-progress__item` should receive a success icon at this point
   */
  &.slds-is-completed .slds-progress__marker_icon {
    border-color: transparent;
    color: var(--slds-g-color-accent-container-1);
  }

  /**
   * Stateful class for the active step
   */
  &.slds-is-active .slds-progress__marker {
    /* Adds whitespace around indicator */
    box-shadow: var(--slds-g-color-surface-container-1) 0 0 0 var(--slds-g-sizing-2);
  }

  &.slds-is-active .slds-progress__marker:hover,
  &.slds-is-active .slds-progress__marker:focus {
    border-color: var(--slds-g-color-border-accent-2);
  }

  &.slds-is-active .slds-progress__marker:focus-visible {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
  }

  /**
   * Indicates error state for a step in the progress
   */
  &.slds-has-error .slds-progress__marker,
  &.slds-has-error .slds-progress__marker:hover,
  &.slds-has-error .slds-progress__marker:focus {
    color: var(--slds-g-color-error-1);
    background-color: var(--slds-g-color-surface-container-1);
    border-color: transparent;
    box-shadow: none;
  }

  &.slds-has-error .slds-progress__marker:focus-visible {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
  }
}

/**
 * Dot indicator for each step
 */
.slds-progress__marker {
  width: var(--slds-g-sizing-5);
  height: var(--slds-g-sizing-5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--slds-g-radius-border-circle);
  background-color: var(--slds-g-color-neutral-base-50);
  border: var(--slds-g-sizing-2) solid var(--slds-g-color-on-accent-1);
  vertical-align: middle;

  &:focus {
    outline: none;
  }

  &:focus-visible {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
    outline: none;
  }
}

/**
  * Modifier that notifies the marker indicator that the step has been completed and its getting an icon
  */
.slds-progress__marker_icon {
  width: auto;
  height: auto;
  line-height: 0;

  .slds-icon_container {
    line-height: 0;
  }

  .slds-icon {
    fill: currentColor;
  }
}

/**
 * Initialize Progress Indicator Vertical
 */
.slds-progress_vertical {
  max-width: none;

  .slds-progress__list {
    display: block;
  }

  .slds-progress__item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
  }

  .slds-progress__item::before,
  .slds-progress__item::after {
    content: '';
    position: absolute;
    /* "-1px" accounts for half of line width to get true center */
    inset-inline-start: calc((var(--slds-g-spacing-4) / 2) - 1px);
    width: var(--slds-g-sizing-1);
    background-color: var(--slds-g-color-neutral-base-50);
  }

  .slds-progress__item::before {
    inset-block-start: 0;
    inset-block-end: 50%;
  }

  .slds-progress__item::after {
    inset-block-start: 50%;
    inset-block-end: 0;
  }

  .slds-progress__item:first-child::before,
  .slds-progress__item:last-child::after {
    display: none;
  }

  .slds-progress__item.slds-is-completed::before,
  .slds-progress__item.slds-is-completed::after,
  .slds-progress__item.slds-is-active::before,
  .slds-progress__item.slds-has-error::before {
    background-color: var(--slds-g-color-accent-container-1);
  }

  /**
   * Support content in line with progress marker
   */
  .slds-progress__item_content {
    flex: 1;
    align-items: center;
    margin-block-start: var(--slds-g-spacing-3);
    padding-block-end: var(--slds-g-spacing-3);
  }

  /**
   * Add borders between progress items
   */
  .slds-progress__list-bordered .slds-progress__item:not(:last-child) .slds-progress__item_content {
    border-block-end: var(--slds-g-sizing-border-1) var(--slds-g-color-border-1) solid;
  }

  .slds-progress__marker {
    display: flex;
    justify-content: center;
    margin-inline-end: var(--slds-g-spacing-4);
    min-width: var(--slds-g-sizing-5);
    z-index: 5;
  }

  .slds-progress__marker_icon {
    border-inline-end: 0;
    border-inline-start: 0;
  }

  .slds-progress__item.slds-is-completed .slds-progress__marker_icon svg {
    fill: var(--slds-g-color-accent-1);
  }

  /**
   * Turn completed stage checkmark green
   */
  .slds-progress__item.slds-is-completed .slds-progress__marker_icon-success svg {
    fill: var(--slds-g-color-success-1);
  }

  .slds-progress__item.slds-has-error .slds-progress__marker_icon svg {
    fill: var(--slds-g-color-error-1);
  }
}

/**
 * Creates a green bar for the vertical variant
 */
.slds-progress_success {
  .slds-progress__item.slds-is-completed::before,
  .slds-progress__item.slds-is-completed::after,
  .slds-progress__item.slds-is-active::before,
  .slds-progress__item.slds-has-error::before {
    opacity: 0.3;
    background-color: var(--slds-g-color-success-1);
  }
}