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

.slds-path {
  /**
   * Indicates the coaching section is expanded
   */
  &.slds-is-expanded {
    padding-block-end: var(--slds-g-spacing-var-block-3);
    border-color: var(--slds-g-color-border-2);
  }
}

/**
 * Allows the path itself to be responsive
 */
.slds-path__track {
  flex-wrap: wrap;
  align-items: flex-start;

  @media (min-width: 64em) {
    flex-wrap: nowrap;
    align-items: stretch;
  }

  /**
   * Indicates the scroller is in the overflow state
   */
  &.slds-has-overflow {
    /**
     * Allows the path to scroll when necessary
     */
    .slds-path__scroller_inner {
      display: flex;
      width: 100%;
      overflow: hidden;
    }

    .slds-path__scroll-controls {
      display: inline-flex;
      flex-shrink: 0;
      padding-inline-start: var(--slds-g-spacing-2);

      .slds-icon-text-default {
        --slds-c-icon-color-foreground: currentColor;
      }

      /* hide the scroll controls on devices where touch is the primary interface */
      @media (pointer: coarse) and (hover: none) {
        display: none;
      }
    }
  }
}

/**
 * Creates the scrolling container for tab overflow
 */
.slds-path__scroller {
  flex: 1;
  max-width: 100%;
  overflow: hidden;
}

/**
 * Container for the buttons that control the scrolling
 */
.slds-path__scroll-controls {
  display: none;
}

/**
 * Shows the stage name when in the smaller state
 */
.slds-path__stage-name {
  display: block;
  font-weight: var(--slds-g-font-weight-7);
  margin-block: var(--slds-g-spacing-3);
  margin-inline: 0;

  @media (min-width: 48em) {
    margin: 0;
  }

  @media (min-width: 64em) {
    display: none;
  }
}

/**
 * Creates the container for toggle button and path
 */
.slds-path__scroller-container {
  flex: 1;
  flex-basis: 100%;
  overflow: hidden;

  @media (min-width: 64em) {
    flex-basis: auto;
  }
}

.slds-path_has-coaching .slds-path__action {
  @media (min-width: 48em) {
    padding-inline-start: 2.75rem;
  }

  @media (min-width: 64em) {
    padding-inline-start: 0;
  }
}

/**
 * Container for path actions
 */
.slds-path__action {
  flex-grow: 1;
  flex-basis: 100%;
  margin-inline-start: 0;
  align-items: center;
  flex-shrink: 0;
  flex-direction: column;

  .slds-icon-text-default {
    --slds-c-icon-color-foreground: currentColor;
  }

  @media (min-width: 48em) {
    /* max-width: 100%; // IE11 flexbox fix - ensure everything stays inside the flex container */
    justify-content: space-between;
    margin-block-start: var(--slds-g-spacing-4);
    flex-direction: row;
  }

  @media (min-width: 64em) {
    flex-basis: auto;
    flex-grow: 0;
    align-items: normal;
    margin-block-start: 0;
    margin-inline-start: var(--slds-g-spacing-5);
  }
}

/**
 * Horizontal list of stages in path component
 */
.slds-path__nav {
  display: flex;
  align-items: flex-start;
  overflow: hidden;

  /**
  * Creates the incomplete stage of the path
  */
  .slds-is-incomplete {
    background: var(--_slds-c-path-item-color-background-incomplete);

    &::before,
    &::after {
      background: var(--_slds-c-path-item-color-background-incomplete);
    }

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

    &:hover {
      background: var(--_slds-c-path-item-color-background-incomplete-hover);

      &::before,
      &::after {
        background: var(--_slds-c-path-item-color-background-incomplete-hover);
      }
    }
  }

  /**
   * Creates the completed stage of the path
   */
  .slds-is-complete {
    background: var(--_slds-c-path-item-color-background-complete);

    &::before,
    &::after {
      background: var(--_slds-c-path-item-color-background-complete);
    }

    .slds-path__stage {
      transform: translate(-50%, -50%) rotateX(0deg);

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

    .slds-path__title {
      transform: rotateX(180deg);
    }

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

      color: var(--slds-g-color-on-success-1);
    }

    &:hover {
      /* background: var(--slds-g-color-success-container-2); */
      background: var(--_slds-c-path-item-color-background-complete-hover);

      &::before,
      &::after {
        /* background: var(--slds-g-color-success-container-2); */
        background: var(--_slds-c-path-item-color-background-complete-hover);
      }

      .slds-path__stage {
        transform: translate(-50%, -50%) rotateX(-180deg);
      }

      .slds-path__title {
        transform: rotateX(0deg);
      }
    }
  }

  /**
   * Creates the current stage of the path
   */
  .slds-is-current {
    background-color: var(--slds-g-color-surface-container-1);

    &::before,
    &::after {
      background-color: var(--slds-g-color-surface-container-1);
      /* TODO: SLDS value: #014486 - Mismatch --slds-g-color-accent-container-3 */
      background-image:
        linear-gradient(
          90deg,
          var(--slds-g-color-brand-base-30),
          var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border),
          transparent var(--_slds-c-path-item-sizing-border)
        ),
        linear-gradient(
          90deg,
          var(--slds-g-color-brand-base-30),
          var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border),
          transparent var(--_slds-c-path-item-sizing-border)
        ),
        linear-gradient(
          var(--slds-g-color-brand-base-30),
          var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border),
          transparent var(--_slds-c-path-item-sizing-border)
        );
      background-repeat: no-repeat;
      background-size:
        var(--_slds-c-path-item-sizing-border) 100%,
        var(--_slds-c-path-item-sizing-border) 100%,
        100% var(--_slds-c-path-item-sizing-border);
    }

    &::before {
      background-position:
        top right,
        top left,
        top left;
    }

    &::after {
      background-position:
        top right,
        top left,
        bottom left;
    }

    &:first-child {
      /* TODO: SLDS value: #014486 - Mismatch --slds-g-color-accent-container-3 */
      border: var(--_slds-c-path-item-sizing-border) solid var(--slds-g-color-brand-base-30);
      border-inline-end: 0;

      &::before,
      &::after {
        background-color: transparent;
        background-image: linear-gradient(
          90deg,
          var(--slds-g-color-brand-base-30),
          var(--slds-g-color-brand-base-30) var(--_slds-c-path-item-sizing-border),
          transparent var(--_slds-c-path-item-sizing-border)
        );
      }

      &::before {
        inset-block-start: calc(var(--_slds-c-path-item-sizing-border) * -1);
      }

      &::after {
        inset-block-end: calc(var(--_slds-c-path-item-sizing-border) * -1);
      }

      &:hover {
        /* TODO: Update when available - Value: #032d60 */
        border-color: var(--slds-g-color-brand-base-20);

        &::before,
        &::after {
          /* TODO: Update when available - Value: #032d60 */
          background-image: linear-gradient(
            90deg,
            var(--slds-g-color-brand-base-20),
            var(--slds-g-color-brand-base-20) var(--_slds-c-path-item-sizing-border),
            transparent var(--_slds-c-path-item-sizing-border)
          );
        }
      }

      .slds-path__link {
        height: var(--_slds-c-path-item-sizing-height);
      }
    }

    .slds-path__link {
      /* TODO: Update when available - Value: #032d60 */
      color: var(--slds-g-color-brand-base-20);
    }

    &:hover {
      &::before,
      &::after {
        /* TODO: Update when available - Value: #032d60 */
        background-image:
          linear-gradient(
            90deg,
            var(--slds-g-color-brand-base-20),
            var(--slds-g-color-brand-base-20) 0.125rem,
            transparent 0.125rem
          ),
          linear-gradient(
            90deg,
            var(--slds-g-color-brand-base-20),
            var(--slds-g-color-brand-base-20) 0.125rem,
            transparent 0.125rem
          ),
          linear-gradient(
            var(--slds-g-color-brand-base-20),
            var(--slds-g-color-brand-base-20) 0.125rem,
            transparent 0.125rem
          );
      }

      .slds-path__link {
        /* TODO: Update when available - Value: #032d60 */
        color: var(--slds-g-color-brand-base-20);
      }
    }
  }

  /**
   * Creates the active stage of the sales path
   */
  .slds-is-active {
    /* TODO: SLDS value: #014486 - Mismatch --slds-g-color-accent-container-3 */
    background: var(--_slds-c-path-item-color-background-active);

    &::before,
    &::after {
      background: var(--_slds-c-path-item-color-background-active);
    }

    &:first-child {
      border: 0;

      &::before,
      &::after {
        background: var(--_slds-c-path-item-color-background-active);
      }

      &::before {
        inset-block-start: 0;
      }

      &::after {
        inset-block-end: 0;
      }

      .slds-path__link {
        height: 2rem;
      }
    }

    .slds-path__stage {
      transform: translateY(-50%) rotateX(-180deg);
    }

    .slds-path__title {
      transform: rotateX(0deg);
    }

    .slds-path__link {
      color: var(--slds-g-color-on-surface-inverse-1);
    }

    &:hover {
      /* TODO: Update when available - Value: #032d60 */
      background: var(--_slds-c-path-item-color-background-active-hover);

      &::before,
      &::after {
        /* TODO: Update when available - Value: #032d60 */
        background: var(--_slds-c-path-item-color-background-active-hover);
      }

      .slds-path__link {
        color: var(--slds-g-color-on-surface-inverse-1);
      }
    }
  }

  /**
   * Creates lost stage of the path
   */
  .slds-is-lost {
    /* TODO: SLDS value: #ea001e */
    background: var(--_slds-c-path-item-color-background-error);

    &::before,
    &::after,
    &:hover,
    &:hover::before,
    &:hover::after {
      background: var(--_slds-c-path-item-color-background-error);
    }

    .slds-path__link {
      color: var(--slds-g-color-on-error-1);
    }

    &:hover {
      .slds-path__link {
        color: var(--slds-g-color-on-error-1);
      }
    }
  }

  /**
   * Creates success stage of the path
   */
  .slds-is-won {
    background: var(--_slds-c-path-item-color-background-success);

    &::before,
    &::after,
    &:hover,
    &:hover::before,
    &:hover::after {
      background: var(--_slds-c-path-item-color-background-success);
    }

    .slds-path__link {
      color: var(--slds-g-color-on-success-1);
    }

    &:hover {
      .slds-path__link {
        color: var(--slds-g-color-on-success-1);
      }
    }
  }
}

/* alias selectors for assigning won/lost to the path parent */
.slds-path.slds-is-won .slds-path__item.slds-is-current {
  background: var(--_slds-c-path-item-color-background-success);

  &::before,
  &::after,
  &:hover,
  &:hover::before,
  &:hover::after {
    background: var(--_slds-c-path-item-color-background-success);
  }
}

.slds-path.slds-is-lost .slds-path__item.slds-is-current {
  /* TODO: SLDS value: #ea001e */
  background: var(--slds-g-color-error-base-50);

  &::before,
  &::after,
  &:hover,
  &:hover::before,
  &:hover::after {
    background: var(--slds-g-color-error-base-50);
  }
}

/* Note: Order matters. Keep the path__item below the above selectors */

/**
 * Individual stages of a path
 */
.slds-path__item {
  position: relative;
  flex: 1;
  margin-inline-start: 0.375rem;
  margin-inline-end: 0.4375rem;
  min-width: 5rem;
  text-align: center;

  &::before,
  &::after {
    content: '';
    position: absolute;
    inset-inline-start: -0.25rem;
    inset-inline-end: -0.3125rem;
    cursor: pointer;
  }

  &::before {
    inset-block-start: 0;
    height: 1.0313rem; /* rounded from 1.03125rem because of stylelint */
    transform: skew(28deg) translate3d(0, 0, 0);
  }

  &::after {
    inset-block-end: 0;
    height: 1rem;
    transform: skew(-30deg) translate3d(0, 0, 0);
  }

  &:first-child {
    margin-inline-start: 0;
    border-start-start-radius: 2rem;
    border-end-start-radius: 2rem;
    padding-inline-start: 0.625rem;

    &::before,
    &::after {
      inset-inline-start: 1.125rem;
    }
  }

  &:last-child {
    margin-inline-end: 0;
    border-start-end-radius: 2rem;
    border-end-end-radius: 2rem;
    padding-inline-end: 0.625rem;

    .slds-path__link {
      padding-inline-start: var(--slds-g-spacing-1);
    }

    &::before,
    &::after {
      inset-inline-end: 0.625rem;
    }
  }

  [dir='rtl'] & {
    &::before {
      transform: skew(-30deg) translate3d(0, 0, 0);
    }

    &::after {
      transform: skew(28deg) translate3d(0, 0, 0);
    }
  }

  .slds-icon_container {
    display: flex;
  }
}

/**
 * Contains the name of the stage
 */
.slds-path__title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
}

/**
 * Contains the check mark when the stage is completed
 */
.slds-path__stage {
  position: absolute;
  inset-block-start: 50%;

  /* RTL: physical (mirrors SLDS1 @noflip) — centering paired with translate */
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-180deg);
}

/**
 * Creates actionable element inside of each path item
 */
.slds-path__link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-1) var(--slds-g-spacing-2) var(--slds-g-spacing-2);
  text-decoration: none;
  z-index: 5;
  cursor: pointer;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    outline: 0;
  }

  &:focus-visible {
    box-shadow: var(--slds-g-shadow-insetinverse-focus-1);
    outline: 0;
    text-decoration: none;
  }
}

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

/**
 * Button that toggles visibility of stage's tabpanel
 * increased specificity to avoid issues with PathSimple/legacy path
 */
.slds-path .slds-path__trigger {
  margin-inline-end: var(--slds-g-spacing-3);
  transition: 0.4s transform ease-in-out;
  display: none;

  .slds-icon-text-default {
    --slds-c-icon-color-foreground: currentColor;
  }

  @media (min-width: 48em) {
    display: block;
  }
}

/**
 * @TODO: Move to global utility?
 * NOTE: These are deprecated in SLDS Path (no longer used - see trigger_open below)
 */
/* .slds-flip_vertical,
.slds-flip--vertical {
  transform: rotateX(180deg);
} */

/* .slds-flip_horizontal,
.slds-flip--horizontal {
  transform: rotateY(180deg);
} */

.slds-path__trigger_open {
  transform: rotate(90deg);

  [dir='rtl'] & {
    transform: rotate(-90deg);
  }
}

/**
 * Actionable button that invokes a completion of the path
 * increased specificity to avoid issues with PathSimple/legacy path
 */
.slds-path .slds-path__mark-complete {
  --slds-c-button-sizing-border: 0;

  width: 100%;
  min-width: 13rem;
  margin-inline-end: 0;
  justify-content: center;

  @media (min-width: 48em) {
    width: auto;
  }
}

/**
 * Actionable button that invokes a current stage of the path
 */
.slds-path__mark-current {
  border-color: var(--slds-g-color-border-accent-2);
  background-color: var(--slds-g-color-accent-container-1);

  &:hover,
  &:focus {
    background-color: var(--slds-g-color-accent-container-3);
  }
}

/**
 * Tabpanel of each stage of the path
 */

/**
 * Guidance section of expanded tabpanel
 */
.slds-path__guidance {
  margin-inline-end: var(--slds-g-spacing-2);
  padding-block-end: var(--slds-g-spacing-1);
  background-color: var(--slds-g-color-surface-container-1);

  @media (min-width: 48em) {
    margin-block-start: 0;
  }
}

/* Layout adjustments for sub sections of expanded tabpanel */
.slds-path__keys,
.slds-path__guidance {
  flex: 1 1 100%;
  margin-block-start: var(--slds-g-spacing-var-block-4);
  padding-inline-start: 0;
  padding-inline-end: 0;

  @media (min-width: 48em) {
    flex-basis: 50%;
  }
}

/**
 * Key field section of expanded tabpanel
 */
.slds-path__keys {
  @media (min-width: 48em) {
    padding-inline-end: var(--slds-g-spacing-3);
  }
}

/**
 * This creates the layout block for the coaching area
 */
.slds-path__coach {
  flex-wrap: wrap;
  align-items: flex-start;

  @media (min-width: 48em) {
    flex-wrap: nowrap;
    align-items: stretch;
  }
}

/**
 * This creates the underlined titles in the coaching area
 */
.slds-path__coach-title {
  font-size: var(--slds-g-font-scale-neg-1);
  font-weight: var(--slds-g-font-weight-7);
  margin-block-end: var(--slds-g-spacing-2);
  padding-block-end: var(--slds-g-spacing-2);
  line-height: 1.125; /* to align heading in Guidance (due to edit button) */
}

/**
 * The Edit link in Path Coaching
 */
.slds-path__coach-edit {
  border: 0;
  padding: 0;
  line-height: inherit;
}

/**
 * This creates the space at the top of the guidance area
 */
.slds-path__guidance-content {
  padding-block-start: var(--slds-g-spacing-var-block-1);
}

/**
 * This class is used to create a full width coaching toggle in small regions
 */
.slds-path__trigger-coaching-content {
  width: 100%;
  margin-block-start: var(--slds-g-spacing-3);

  @media (min-width: 48em) {
    display: none;
  }
}

/* overrides .slds-button + .slds-button rule by increasing specificity */
.slds-path .slds-path__trigger-coaching-content {
  margin-inline-start: 0;
}

/**
 * This class should be placed on a containing div when the Path container is between 565px and 1280px
 */
.slds-region_medium {
  .slds-path_has-coaching .slds-path__action {
    padding-inline-start: 2.75rem;
  }

  .slds-path__scroller-container {
    flex-basis: 100%;
  }

  .slds-path__track {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .slds-path__action {
    flex-grow: 1;
    flex-basis: 100%;
    margin-inline-start: 0;
    align-items: center;
    /* max-width: 100%; // IE11 flexbox fix - ensure everything stays inside the flex container */
    justify-content: space-between;
    margin-block-start: var(--slds-g-spacing-4);
    flex-direction: row;
  }

  .slds-path__stage-name,
  .slds-path__trigger {
    display: block;
  }

  .slds-path__stage-name {
    margin: 0;
  }

  .slds-path__trigger-coaching-content {
    display: none;
  }

  .slds-path__mark-complete {
    width: auto;
  }

  .slds-path__coach {
    /* max-width: 100%; // IE11 flexbox fix - ensure everything stays inside the flex container */
    justify-content: space-between;
    margin-block-start: var(--slds-g-spacing-4);
    flex-direction: row;
  }

  .slds-path__keys,
  .slds-path__guidance {
    flex-basis: 50%;
  }

  .slds-path__keys {
    padding-inline-end: var(--slds-g-spacing-3);
  }
}

/**
 * This class should be placed on a containing div when the Path container is between 360px and 564px
*/
.slds-region_small {
  .slds-path__scroller-container {
    flex-basis: 100%;
  }

  .slds-path__track,
  .slds-path__coach {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .slds-path__stage-name {
    display: block;
    margin: var(--slds-g-spacing-3) 0;
  }

  .slds-path__action {
    flex-grow: 1;
    flex-basis: 100%;
    margin-inline-start: 0;
    align-items: center;
    flex-direction: column;
    margin-block-start: 0;
  }

  .slds-path_has-coaching .slds-path__action {
    padding-inline-start: 0;
  }

  .slds-path__mark-complete {
    width: 100%;
  }

  .slds-path__keys,
  .slds-path__guidance {
    flex-basis: 100%;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .slds-path__guidance {
    margin-block-start: var(--slds-g-spacing-3);
  }

  .slds-path__trigger {
    display: none;
  }

  .slds-path__trigger-coaching-content {
    display: inline-block;
  }
}