// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @name base
 * @selector .slds-progress
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-progress {
  position: relative;
  max-width: 70%;
  width: 100%;
  flex: 1 1 auto;
  margin: auto;

  .slds-progress-bar {
    position: absolute;
    top: 50%;
    margin-top: (($progress-bar-height * 0.5) * -1);
    background: var(--slds-g-color-neutral-base-50, #{$progress-bar-color-background});
  }
}

/**
  * When on a shaded background such as the modal footer
  *
  * @selector .slds-progress_shade
  * @restrict .slds-progress
  * @modifier
*/
.slds-progress_shade,
.slds-progress--shade {

  .slds-progress__item {

    &.slds-is-completed .slds-progress__marker,
    &.slds-is-active .slds-progress__marker {
      background: var(--slds-g-color-neutral-base-95, #{$progress-color-background-shade});
    }

    &.slds-is-completed .slds-progress__marker_icon,
    &.slds-is-completed .slds-progress__marker--icon {
      border-color: var(--slds-g-color-neutral-base-95, #{$progress-color-background-shade});
    }

    &.slds-is-active .slds-progress__marker {
      box-shadow: var(--slds-g-color-neutral-base-95, #{$progress-color-background-shade}) 0 0 0 4px; // Adds whitespace around indicator

      &:focus {
        box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
        outline: 0;
      }
    }

    &.slds-has-error .slds-progress__marker {

      &,
      &:hover,
      &:focus {
        background: var(--slds-g-color-neutral-base-95, #{$progress-color-background-shade});
      }
    }

    .slds-progress__marker {
      border-color: var(--slds-g-color-neutral-base-95, #{$progress-color-border-shade});
    }
  }
}

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

/**
 * A list item for each step of the process
 *
 * @selector .slds-progress__item
 * @restrict .slds-progress ol li
 * @required
 */
.slds-progress__item {
  display: inline-flex;
  align-self: center;

  &.slds-is-completed .slds-progress__marker,
  &.slds-is-active .slds-progress__marker {
    background: var(--slds-g-color-neutral-base-100, #{$progress-color-background});
    border-color: var(--slds-g-color-brand-base-50, #{$progress-color-border-active});
  }

  /**
   * Stateful class for a completed step, `.slds-progress__item` should receive a success icon at this point
   *
   * @selector .slds-is-completed
   * @restrict .slds-progress__item
   * @notes Class should be applied thought JavaScript
   * @required
   * @modifier
   * @group state
   */
  &.slds-is-completed .slds-progress__marker_icon,
  &.slds-is-completed .slds-progress__marker--icon {
    border-color: var(--slds-g-color-neutral-base-100, #{$progress-color-background});
    color: var(--slds-g-color-brand-base-50, #{$progress-bar-color-background-fill});
  }

  /**
   * Stateful class for the active step
   *
   * @selector .slds-is-active
   * @restrict .slds-progress__item
   * @notes Class should be applied thought JavaScript
   * @required
   * @modifier
   * @group state
   */
  &.slds-is-active .slds-progress__marker {
    box-shadow: var(--slds-g-color-neutral-base-100, #{$progress-color-background}) 0 0 0 4px; // Adds whitespace around indicator

    &:hover,
    &:focus {
      border-color: var(--slds-g-color-brand-base-50, #{$progress-color-border-hover});
    }

    &:focus {
      box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
      outline: 0;
    }
  }

  /**
   * Indicates error state for a step in the progress
   *
   * @selector .slds-has-error
   * @restrict .slds-progress__item
   * @required
   * @modifier
   */
  &.slds-has-error .slds-progress__marker {

    &,
    &:hover,
    &:focus {
      color: var(--slds-g-color-error-base-40, #{$color-text-error});
      background: var(--slds-g-color-neutral-base-100, #{$progress-color-background});
      border-color: transparent;
      box-shadow: none;
    }

    &:focus {
      box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
      outline: 0;
    }
  }
}

/**
 * Dot indicator for each step
 *
 * @selector .slds-progress__marker
 * @restrict .slds-progress ol li button, .slds-progress ol li div, .slds-progress ol li span
 * @required
 */
.slds-progress__marker {
  @include square($square-icon-utility-small);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: $border-radius-circle;
  background: var(--slds-g-color-neutral-base-50, #{$progress-bar-color-background});
  border: 4px solid var(--slds-g-color-neutral-base-100, #{$progress-color-border});
  vertical-align: middle;

  &:focus-visible {
    outline: none;
  }

  &:focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
  }
}

/**
  * Modifier that notifies the marker indicator that the step has been completed and its getting an icon
  *
  * @selector .slds-progress__marker_icon
  * @restrict .slds-progress__marker
  * @required
  */
.slds-progress__marker_icon,
.slds-progress__marker--icon {
  @include square(auto);

  .slds-icon {
    fill: currentColor;
  }
}