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

$legacy-color-background-path-incomplete: #f3f3f3;
$legacy-color-background-path-incomplete-hover: #c9c9c9;
$legacy-color-background-path-complete: #3ba755;
$legacy-color-background-path-complete-hover: #2e844a;
$legacy-color-background-path-current: #014486;
$legacy-color-background-path-current-hover: #032d60;
$legacy-color-background-path-lost: #ea001e;

.slds-path-coach {
  @include deprecate('4.0.0', 'Use .slds-path instead of .slds-path-coach') {
    border: transparent $border-width-thin solid;
    border-top: 0;

    &.slds-is-expanded {
      border-color: var(--slds-g-color-border-base-1, #{$color-border});
      padding-bottom: $spacing-medium;
    }
  }

  .slds-path__mark-current {
    background-color: var(--slds-g-color-brand-base-10, #{$color-background-inverse});
    border-color: var(--slds-g-color-brand-base-10, #{$color-background-inverse});
  }
}

.slds-tabs_path,
.slds-tabs--path {
  @include deprecate('4.0.0', 'Use .sslds-path__scroller with internal scrolling DOM nodes instead of .slds-tabs_path') {
    @include tabs;

    .slds-is-complete {
      background-color: var(--slds-g-color-success-base-60, #{$legacy-color-background-path-complete});

      .slds-tabs_path__stage,
      .slds-tabs--path__stage {
        transform: rotateX(0deg);
      }

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

      .slds-tabs_path__link,
      .slds-tabs--path__link {
        color: var(--slds-g-color-neutral-base-10, #{$color-text-action-label-active});
      }

      &:hover {
        background-color: var(--slds-g-color-success-base-50 ,#{$legacy-color-background-path-complete-hover});

        .slds-tabs_path__stage,
        .slds-tabs--path__stage {
          transform: rotateX(-180deg);
        }

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

        .slds-tabs_path__link,
        .slds-tabs--path__link {
          color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
        }
      }
    }

    .slds-is-current {
      background-color: var(--slds-g-color-palette-blue-30, #{$legacy-color-background-path-current});

      &:hover {
        background-color: var(--slds-g-color-palette-blue-20, #{$legacy-color-background-path-current-hover});
      }

      + .slds-is-incomplete:before {
        background-color: var(--slds-g-color-palette-blue-30, #{$legacy-color-background-path-current});
      }

      &:hover + .slds-is-incomplete:before {
        background-color: var(--slds-g-color-palette-blue-20, #{$legacy-color-background-path-current-hover});
      }
    }

    .slds-is-incomplete {
      background-color: var(--slds-g-color-neutral-base-95, #{$legacy-color-background-path-incomplete});

      &:hover {
        background-color: var(--slds-g-color-neutral-base-80, #{$legacy-color-background-path-incomplete-hover});
      }

      .slds-tabs_path__link,
      .slds-tabs--path__link {
        color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
      }
    }

    .slds-is-lost,
    .slds-is-lost:hover {
      background-color: var(--slds-g-color-error-base-50, #{$legacy-color-background-path-lost});
    }

    // Lets make sure we have the right color when these steps are activated
    .slds-is-current,
    .slds-is-lost {

      .slds-tabs_path__link,
      .slds-tabs--path__link {
        color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
      }
    }

    .slds-is-active {
      background-color: var(--slds-g-color-brand-base-10, #{$color-background-inverse});

      .slds-tabs_path__link,
      .slds-tabs--path__link {
        color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
      }

      &:hover {
        background-color: var(--slds-g-color-brand-base-20, #{$color-background-alt-inverse});

        + .slds-tabs_path__item:before,
        + .slds-tabs--path__item:before {
          background-color: var(--slds-g-color-brand-base-20, #{$color-background-alt-inverse});
        }
      }

      + .slds-tabs_path__item:before,
      + .slds-tabs--path__item:before {
        background-color: var(--slds-g-color-brand-base-10, #{$color-background-inverse});
      }
    }

    .slds-is-active,
    .slds-is-won {

      .slds-tabs_path__title,
      .slds-tabs--path__title {
        color: var(--slds-g-color-neutral-base-100, #{$color-gray-1});
        transform: rotateX(0deg);
      }

      .slds-tabs_path__stage,
      .slds-tabs--path__stage {
        transform: rotateX(-180deg);
      }
    }
  }
}

.slds-tabs_path__nav,
.slds-tabs--path__nav {
  @include tabs-nav;
}

.slds-tabs_path__item,
.slds-tabs--path__item {
  @include deprecate('4.0.0', 'Use .slds-path__item instead of .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;

    &:first-child {
      border-radius: $border-radius-pill 0 0 $border-radius-pill;
    }

    &:last-child {
      border-radius: 0 $border-radius-pill $border-radius-pill 0;
      border-right: 0;
    }

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: $border-width-thick;
      left: (($height-sales-path * 0.5) * -1);
      width: calc(#{$height-sales-path} - (#{$border-width-thick} * 2));
      height: calc(#{$height-sales-path} - (#{$border-width-thick} * 2));
      border: $border-width-thick solid var(--slds-g-color-neutral-base-100, #{$color-border-path-divider});
      border-left: 0;
      border-bottom: 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;
    }

    &: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-is-complete:before,
    + .slds-is-current:before {
      background-color: var(--slds-g-color-success-base-60, #{$legacy-color-background-path-complete});
    }

    &:hover + .slds-is-complete:before,
    &:hover + .slds-is-current:before {
      background-color: var(--slds-g-color-success-base-50, #{$legacy-color-background-path-complete-hover});
    }

    + .slds-is-incomplete:before,
    + .slds-is-lost:before {
      background-color: var(--slds-g-color-neutral-base-95, #{$legacy-color-background-path-incomplete});
    }

    &:hover + .slds-is-incomplete:before,
    &:hover + .slds-is-lost:before {
      background-color: var(--slds-g-color-neutral-base-80, #{$legacy-color-background-path-incomplete-hover});
    }
  }
}

.slds-tabs_path__title,
.slds-tabs--path__title {
  @include deprecate('4.0.0', 'Use .slds-path__title instead of .slds-tabs_path__title') {
    @include truncate;
  }
}

.slds-tabs_path__stage,
.slds-tabs--path__stage {
  @include deprecate('4.0.0', 'Use .slds-path__stage instead of .slds-tabs_path__stage') {
    position: absolute;
    top: 50%;
    left: ($square-icon-medium-content * 0.5);
    width: 100%;
    margin-top: ($spacing-x-small * -1);
    transform: rotateX(-180deg);
    line-height: 1;
  }
}

.slds-tabs_path__link,
.slds-tabs--path__link {
  @include deprecate('4.0.0', 'Use .slds-path__link instead of .slds-tabs_path__link') {
    display: flex;
    justify-content: center;
    position: relative;
    padding: $spacing-xx-small $spacing-xx-small $spacing-xx-small ($spacing-medium + $spacing-xx-small);
    line-height: $line-height-salespath;
    text-decoration: none;
    cursor: pointer; // needed in case links have no href & use JS

    &:hover {
      text-decoration: none;
    }

    &:focus {
      outline: 0;
    }
  }
}

.slds-tabs_path__title,
.slds-tabs--path__title,
.slds-tabs_path__stage,
.slds-tabs--path__stage {
  display: block;
  transition: transform 0.2s linear;
  // we should be able to get rid of this prefix once this issue is fixed
  // https://github.com/postcss/autoprefixer/issues/653
  // stylelint-disable property-no-vendor-prefix
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slds-tabs_path__content,
.slds-tabs--path__content {
  @include deprecate('4.0.0', 'Use .slds-path__content instead of .slds-tabs_path__content') {
    position: relative;
    padding-left: $spacing-large;
    padding-right: $spacing-medium;
  }
}

.slds-coach__keys {
  @include deprecate('4.0.0', 'Use .slds-path__keys instead of .slds-coach__keys') {
    padding-left: $spacing-small;
  }
}

.slds-coach__guidance {
  @include deprecate('4.0.0', 'Use .slds-path__guidance instead of .slds-coach__guidance') {
    padding-left: $spacing-large;
    padding-bottom: $spacing-xx-small;
    background-color: var(--slds-g-color-neutral-base-100, #{$color-background-guidance});
  }
}

// Layout adjustments for sub sections of expanded tabpanel
.slds-coach__keys,
.slds-coach__guidance {
  margin-top: $spacing-medium;
  padding-top: $spacing-medium;
  padding-right: $spacing-large;
}

.slds-coach__item {
  @include deprecate('4.0.0', 'Remove dt .slds-coach__item in favor of the new form markup, .slds-form-element__label') {
    border-top: var(--slds-g-color-border-base-1, #{$color-border}) $border-width-thin solid;
    padding: $spacing-medium 0;
    color: var(--slds-g-color-neutral-base-30, #{$color-text-weak});
  }
}

.slds-coach__value {
  @include deprecate('4.0.0', 'Remove dd .slds-coach__value in favor of the new form markup, .slds-form-element__static') {
    border-top: var(--slds-g-color-border-base-1, #{$color-border}) $border-width-thin solid;
    padding-top: $spacing-medium;
    color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
  }
}