// Lightning Design System 2.3.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @name base
 * @selector .slds-nav-vertical
 * @restrict nav
 * @variant
 */
.slds-nav-vertical {
  position: relative;
}

/**
 * Modifer to reduce spacing between navigation items
 *
 * @selector .slds-nav-vertical_compact
 * @restrict .slds-nav-vertical
 * @modifier
 */
.slds-nav-vertical_compact {

  .slds-nav-vertical__title,
  .slds-nav-vertical__action {
    padding: $spacing-xx-small $spacing-large;
  }
}

/**
 * Modifier to adjust list item when vertical navigation is sitting on top of a shaded background
 *
 * @selector .slds-nav-vertical_shade
 * @restrict .slds-nav-vertical
 * @modifier
 */
.slds-nav-vertical_shade {

  .slds-nav-vertical__action {

    &:hover {
      background-color: $vertical-navigation-color-background-shade-row-hover;
    }

    &:active {
      background-color: $vertical-navigation-color-background-shade-row-active;
    }
  }

  .slds-is-active .slds-nav-vertical__action {
    background-color: $color-background-alt;
    border-color: $color-border;
  }
}

/**
 * Section title of the vertical navigation
 *
 * @selector .slds-nav-vertical__title
 * @restrict .slds-nav-vertical h2
 */
.slds-nav-vertical__title {
  padding: $spacing-x-small $spacing-medium;
  padding-left: $spacing-large;

  &:not(:first-of-type) {
    margin-top: $spacing-x-small;
  }
}

.slds-nav-vertical__section:not(:first-of-type) {
  margin-top: $spacing-x-small;
}

/**
 * List of the vertical navigation
 *
 * @selector .slds-nav-vertical__item
 * @restrict .slds-nav-vertical li
 */
.slds-nav-vertical__item {
  position: relative;

  &.slds-is-active:before {
    content: '';
    width: 4px;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background: $color-brand-dark;
  }
}

/**
 * Actionable element inside of vertical navigation list item
 *
 * @selector .slds-nav-vertical__action
 * @restrict .slds-nav-vertical a, .slds-nav-vertical button
 */
.slds-nav-vertical__action {
  display: flex;
  align-items: center;
  width: 100%;
  padding: $spacing-x-small $spacing-large;
  border-top: $border-width-thin solid transparent;
  border-bottom: $border-width-thin solid transparent;
  border-radius: 0;

  &,
  &:active,
  &:hover,
  &:focus {
    color: currentColor;
  }

  &:hover {
    background-color: $color-background-row-hover;
    text-decoration: none;
  }

  &:focus {
    outline: 0;
    box-shadow: none;
    text-decoration: underline;
  }

  &:active {
    background-color: $color-background-row-active;

    &:focus {
      text-decoration: none;
    }
  }
}

/**
 * Active state of a list item within a vertical navigation
 *
 * @selector .slds-is-active
 * @restrict .slds-nav-vertical__item
 * @modifier
 */
.slds-nav-vertical__item.slds-is-active {
  color: $color-text-link;

  .slds-nav-vertical__action {
    background-color: $color-background-row-selected;
  }
}

/**
 * @name base
 * @selector .slds-navigation-list_vertical
 * @restrict div
 * @variant
 * @deprecated
 */
@include deprecate('4.0.0', 'Do not use slds-navigation-list--vertical anymore, please use newer version slds-nav-vertical') {

  .slds-navigation-list-vertical,
  .slds-navigation-list--vertical {
    /**
     * Active item in vertical navigation list
     *
     * @selector .slds-is-active
     * @restrict .slds-navigation-list-vertical li
     * @modifier
     */
    .slds-is-active {
      color: $color-text-link;

      .slds-navigation-list-vertical__action,
      .slds-navigation-list--vertical__action {
        background-color: $color-background-row-selected;
        border-color: $color-border;
        border-left-color: $color-background-button-brand-hover;

        &:focus {
          border-left-width: $spacing-x-small;
          color: $color-text-link-focus;
        }
      }
    }
  }

  /**
   * Vertical Navigation on tinted background
   *
   * @selector .slds-navigation-list-vertical_shade
   * @restrict .slds-navigation-list-vertical
   * @modifier
   * @group theme
   */
  .slds-navigation-list-vertical_shade,
  .slds-navigation-list-vertical--shade,
  .slds-navigation-list--vertical-inverse { // <= bad legacy

    .slds-is-active .slds-navigation-list-vertical__action,
    .slds-is-active .slds-navigation-list--vertical__action {
      background-color: $color-background-alt;
    }
  }

  /**
   * Actionable item inside a vertical navigation list
   *
   * @selector .slds-navigation-list-vertical__action
   * @restrict .slds-navigation-list-vertical a
   * @required
   */
  .slds-navigation-list-vertical__action,
  .slds-navigation-list--vertical__action {
    display: block;
    border: {
      left: $spacing-xx-small solid transparent;
      top: $border-width-thin solid transparent;
      bottom: $border-width-thin solid transparent;
    }
    padding: $spacing-x-small $spacing-large;

    &:hover,
    &:focus {
      outline: 0;
      background-color: $color-background-row-hover;
    }

    &:active {
      background-color: $color-background-row-active;
    }
  }
}