// Lightning Design System 2.8.0
// 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: #e0e5ee;
$legacy-color-background-path-incomplete-hover: #d8dde6;
$legacy-color-background-path-complete: #51c983;
$legacy-color-background-path-complete-hover: #1f8956;
$legacy-color-background-path-current: #1172cf;
$legacy-color-background-path-current-hover: #0d61af;
$legacy-color-background-path-lost: #c23934;

.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: $color-border;
      padding-bottom: $spacing-medium;
    }
  }

  .slds-path__mark-current {
    background-color: $color-background-inverse;
    border-color: $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;

    &__nav {
      @include tabs-nav;
    }

    .slds-is-complete {
      background-color: $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: $color-text-action-label-active;
      }

      &:hover {
        background-color: $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: $color-text-inverse;
        }
      }
    }

    .slds-is-current {
      background-color: $legacy-color-background-path-current;

      &:hover {
        background-color: $legacy-color-background-path-current-hover;
      }

      + .slds-is-incomplete:before {
        background-color: $legacy-color-background-path-current;
      }

      &:hover + .slds-is-incomplete:before {
        background-color: $legacy-color-background-path-current-hover;
      }
    }

    .slds-is-incomplete {
      background-color: $legacy-color-background-path-incomplete;

      &:hover {
        background-color: $legacy-color-background-path-incomplete-hover;
      }

      .slds-tabs_path__link,
      .slds-tabs--path__link {
        color: $color-text-default;
      }
    }

    .slds-is-lost,
    .slds-is-lost:hover {
      background-color: $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: $color-text-inverse;
      }
    }

    .slds-is-active {
      background-color: $color-background-inverse;

      .slds-tabs_path__link,
      .slds-tabs--path__link {
        color: $color-text-inverse;
      }

      &:hover {
        background-color: $color-background-alt-inverse;

        + .slds-tabs_path__item:before,
        + .slds-tabs--path__item:before {
          background-color: $color-background-alt-inverse;
        }
      }

      + .slds-tabs_path__item:before,
      + .slds-tabs--path__item:before {
        background-color: $color-background-inverse;
      }
    }

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

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

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

.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 / 2) * -1);
      width: calc(#{$height-sales-path} - (#{$border-width-thick} * 2));
      height: calc(#{$height-sales-path} - (#{$border-width-thick} * 2));
      border: $border-width-thick solid $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: $legacy-color-background-path-complete;
    }

    &:hover + .slds-is-complete:before,
    &:hover + .slds-is-current:before {
      background-color: $legacy-color-background-path-complete-hover;
    }

    + .slds-is-incomplete:before,
    + .slds-is-lost:before {
      background-color: $legacy-color-background-path-incomplete;
    }

    &:hover + .slds-is-incomplete:before,
    &:hover + .slds-is-lost:before {
      background-color: $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 / 2);
    width: 100%;
    margin-top: ($spacing-x-small * -1);
    transform: rotateX(-180deg);
  }
}

.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: $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: $color-border $border-width-thin solid;
    padding: $spacing-medium 0;
    color: $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: $color-border $border-width-thin solid;
    padding-top: $spacing-medium;
    color: $color-text-default;
  }
}