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

/*
  Use .slds-path instead of .slds-path-coach
*/
.slds-path-coach {
  border: transparent var(--slds-g-sizing-border-1) solid;
  border-block-start: 0;
}

.slds-path-coach.slds-is-expanded {
  border-color: var(--slds-g-color-border-1);
  padding-block-end: var(--slds-g-spacing-4);
}

.slds-path-coach .slds-path__mark-current {
  background-color: var(--slds-g-color-accent-container-1);
  border-color: var(--slds-g-color-border-accent-2);
}

/*
  Use .sslds-path__scroller with internal scrolling DOM nodes instead of .slds-tabs_path
*/
.slds-tabs_path {
  display: block;
  width: 100%;
}

.slds-tabs_path .slds-is-complete {
  background-color: var(--_slds-c-path-item-color-background-complete);
}

.slds-tabs_path .slds-is-complete .slds-tabs_path__stage {
  transform: rotateX(0deg);
}

.slds-tabs_path .slds-is-complete .slds-tabs_path__title {
  transform: rotateX(180deg);
}

.slds-tabs_path .slds-is-complete .slds-tabs_path__link {
  color: var(--slds-g-color-on-success-1);
}

.slds-tabs_path .slds-is-complete:hover {
  background-color: var(--_slds-c-path-item-color-background-complete-hover);
}

.slds-tabs_path .slds-is-complete:hover .slds-tabs_path__stage {
  transform: rotateX(-180deg);
}

.slds-tabs_path .slds-is-complete:hover .slds-tabs_path__title {
  transform: rotateX(0deg);
}

.slds-tabs_path .slds-is-complete:hover .slds-tabs_path__link {
  color: var(--slds-g-color-on-success-1);
}

.slds-tabs_path .slds-is-current {
  background-color: var(--slds-g-color-surface-container-inverse-1);
}

.slds-tabs_path .slds-is-current:hover {
  background-color: var(--slds-g-color-surface-container-inverse-2);
}

.slds-tabs_path .slds-is-current + .slds-is-incomplete::before {
  background-color: var(--slds-g-color-surface-container-inverse-1);
}

.slds-tabs_path .slds-is-current:hover + .slds-is-incomplete::before {
  background-color: var(--slds-g-color-surface-container-inverse-2);
}

.slds-tabs_path .slds-is-incomplete {
  background-color: var(--_slds-c-path-item-color-background-incomplete);
}

.slds-tabs_path .slds-is-incomplete:hover {
  background-color: var(--_slds-c-path-item-color-background-incomplete-hover);
}

.slds-tabs_path .slds-is-incomplete .slds-tabs_path__link {
  color: var(--_slds-c-path-item-color-incomplete);
}

.slds-tabs_path .slds-is-lost,
.slds-tabs_path .slds-is-lost:hover {
  background-color: var(--_slds-c-path-item-color-background-error);
}

.slds-tabs_path .slds-is-current .slds-tabs_path__link {
  color: var(--slds-g-color-on-surface-inverse-1);
}

.slds-tabs_path .slds-is-lost .slds-tabs_path__link {
  color: var(--slds-g-color-on-error-1);
}

.slds-tabs_path .slds-is-active {
  background-color: var(--slds-g-color-surface-inverse-2);
}

.slds-tabs_path .slds-is-active .slds-tabs_path__link {
  color: var(--slds-g-color-on-surface-inverse-1);
}

.slds-tabs_path .slds-is-active:hover {
  background-color: var(--slds-g-color-surface-container-inverse-1);
}

.slds-tabs_path .slds-is-active:hover + .slds-tabs_path__item::before {
  background-color: var(--slds-g-color-surface-container-inverse-1);
}

.slds-tabs_path .slds-is-active + .slds-tabs_path__item::before {
  background-color: var(--slds-g-color-surface-inverse-2);
}

.slds-tabs_path .slds-is-active .slds-tabs_path__title {
  color: var(--slds-g-color-on-accent-1);
  transform: rotateX(0deg);
}

.slds-tabs_path .slds-is-won .slds-tabs_path__title {
  color: var(--slds-g-color-on-success-1);
  transform: rotateX(0deg);
}

.slds-tabs_path .slds-is-active .slds-tabs_path__stage,
.slds-tabs_path .slds-is-won .slds-tabs_path__stage {
  transform: rotateX(-180deg);
}

.slds-tabs_path__nav {
  display: flex;
  align-items: flex-start;
}

/*
  Use .slds-path__item instead of .slds-tabs_path__item
*/
.slds-tabs_path__item {
  overflow: hidden;
  position: relative;
  flex: 1 1 0%;
  min-width: 5rem;
  text-align: center;
  perspective: 500px;
  transition:
    transform 0.1s ease-in-out,
    background-color 0.1s linear;
}

.slds-tabs_path__item:first-child {
  border-start-start-radius: var(--slds-g-radius-border-pill);
  border-end-start-radius: var(--slds-g-radius-border-pill);
}

.slds-tabs_path__item:last-child {
  border-start-end-radius: var(--slds-g-radius-border-pill);
  border-end-end-radius: var(--slds-g-radius-border-pill);
  border-inline-end: 0;
}

.slds-tabs_path__item::before {
  content: '';
  display: block;
  position: absolute;
  top: 0.125rem;
  inset-inline-start: -1rem;
  width: calc(var(--slds-g-sizing-9) - (var(--slds-g-sizing-border-2) * 2));
  height: calc(var(--slds-g-sizing-9) - (var(--slds-g-sizing-border-2) * 2));
  border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-on-accent-1);
  border-inline-start: 0;
  border-block-end: 0;
  background-clip: padding-box;
  transform: scale3d(0.8, 1.1, 1) rotate(45deg);
  transition:
    transform 0.1s ease-in-out,
    background-color 0.1s linear;
}

[dir='rtl'] .slds-tabs_path__item::before {
  transform: scale3d(0.8, 1.1, 1) rotate(-45deg);
}

.slds-tabs_path__item:first-child::before {
  display: none;
}

/*
  The below logic makes the :before (which is actually a part of the previous section) the proper color based on tabs--path__item order
*/
.slds-tabs_path__item + .slds-is-complete::before,
.slds-tabs_path__item + .slds-is-current::before {
  background-color: var(--_slds-c-path-item-color-background-complete);
}

.slds-tabs_path__item:hover + .slds-is-complete::before,
.slds-tabs_path__item:hover + .slds-is-current::before {
  background-color: var(--_slds-c-path-item-color-background-complete-hover);
}

.slds-tabs_path__item + .slds-is-incomplete::before,
.slds-tabs_path__item + .slds-is-lost::before {
  background-color: var(--_slds-c-path-item-color-background-incomplete);
}

.slds-tabs_path__item:hover + .slds-is-incomplete::before,
.slds-tabs_path__item:hover + .slds-is-lost::before {
  background-color: var(--_slds-c-path-item-color-background-incomplete-hover);
}

/*
  Use .slds-path__title instead of .slds-tabs_path__title
*/
.slds-tabs_path__title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  Use .slds-path__stage instead of .slds-tabs_path__stage
*/
.slds-tabs_path__stage {
  position: absolute;
  top: 50%;
  inset-inline-start: 0.5rem;
  width: 100%;
  margin-block-start: calc(var(--slds-g-spacing-2) * -1);
  transform: rotateX(-180deg);
  line-height: 1;
}

/*
  Use .slds-path__link instead of .slds-tabs_path__link
*/
.slds-tabs_path__link {
  display: flex;
  justify-content: center;
  position: relative;
  padding-block: var(--slds-g-spacing-1);
  padding-inline-start: 1.25rem;
  padding-inline-end: var(--slds-g-spacing-1);
  line-height: var(--slds-g-sizing-7);
  text-decoration: none;
  cursor: pointer; /* needed in case links have no href & use JS */
}

.slds-tabs_path__link:hover {
  text-decoration: none;
}

.slds-tabs_path__link:focus {
  outline: 0;
}

.slds-tabs_path__title,
.slds-tabs_path__stage {
  display: block;
  transition: transform 0.2s linear;
  backface-visibility: hidden;
}

/*
  Use .slds-path__content instead of .slds-tabs_path__content
*/
.slds-tabs_path__content {
  position: relative;
  padding-inline-start: var(--slds-g-spacing-5);
  padding-inline-end: var(--slds-g-spacing-4);
}

/*
  Use .slds-path__keys instead of .slds-coach__keys
*/
.slds-coach__keys {
  padding-inline-start: var(--slds-g-spacing-3);
}

/*
  Use .slds-path__guidance instead of .slds-coach__guidance
*/
.slds-coach__guidance {
  padding-inline-start: var(--slds-g-spacing-5);
  padding-block-end: var(--slds-g-spacing-1);
  background-color: var(--slds-g-color-surface-container-1);
}

/*
  Layout adjustments for sub sections of expanded tabpanel
*/
.slds-coach__keys,
.slds-coach__guidance {
  margin-block-start: var(--slds-g-spacing-4);
  padding-block-start: var(--slds-g-spacing-4);
  padding-inline-end: var(--slds-g-spacing-5);
}

/*
  Remove dt .slds-coach__item in favor of the new form markup, .slds-form-element__label
*/
.slds-coach__item {
  border-block-start: var(--slds-g-color-border-1) var(--slds-g-sizing-border-1) solid;
  padding: var(--slds-g-spacing-4) 0;
  color: var(--slds-g-color-on-surface-1);
}

/*
  Remove dd .slds-coach__value in favor of the new form markup, .slds-form-element__static
*/
.slds-coach__value {
  border-block-start: var(--slds-g-color-border-1) var(--slds-g-sizing-border-1) solid;
  padding-block-start: var(--slds-g-spacing-4);
  color: var(--slds-g-color-on-surface-3);
}

.slds-tabs_path .slds-tabs_path__link .slds-icon {
  --slds-c-icon-color-foreground: var(--slds-g-color-on-success-1);
}