// 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

@include deprecate('4.0', 'Use Progress Indicator instead') {

  .slds-wizard {
    position: relative;

    .slds-is-active {

      .slds-wizard__marker {
        background: #0076de; // @TODO: Need a token for this
      }

      a:hover,
      a:focus {

        .slds-wizard__marker {
          background: rgb(0, 95, 178); // @TODO: Need a token for this
        }
      }
    }
  }

  .slds-wizard__list {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: auto;
  }

  .slds-wizard__item {
    flex: 2 0 auto;
    text-align: center;
    width: 0%; // Needed for truncation due to different flex grow on items
    user-select: none;

    &:first-child {
      text-align: left;
      flex-grow: 1;
    }

    &:last-child {
      text-align: right;
      flex-grow: 1;
    }

    a:hover,
    a:focus {
      outline: 0;
      text-decoration: none;

      .slds-wizard__marker {
        background: rgb(216, 221, 230); // @TODO - no matching token
      }
    }
  }

  .slds-wizard__link {
    display: block;
  }

  .slds-wizard__marker {
    @include square($square-icon-small-boundary);
    border-radius: $border-radius-circle;
    background: var(--slds-g-color-neutral-base-95, #{$color-background-dark});
    display: inline-block;
    vertical-align: middle;
    z-index: 1;
    position: relative;
  }

  .slds-wizard__label {
    display: block;
    margin-top: $spacing-small;
  }

  .slds-wizard__progress {
    position: absolute;
    left: 0;
    top: (($square-icon-small-boundary * 0.5) - ($square-icon-x-small-content * 0.25));
    height: ($square-icon-x-small-content * 0.5);
    display: block;
    width: 100%;
    z-index: -1;
    background: var(--slds-g-color-neutral-base-95, #{$color-background-dark});
  }

  .slds-wizard__progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #0076de; // @TODO: Need a token for this
    transition: width $duration-promptly ease;
  }
}