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

/**
 * The default Vertical Tabs component renders a list of tabs and their
 * related content. The tab list is not truncated by default, but truncation
 * can be added with a modifier class on the link elements.
 *
 * @summary Renders a vertical tablist.
 * @name base
 * @selector .slds-vertical-tabs
 * @restrict div, section
 * @support dev-ready
 * @variant
 */
.slds-vertical-tabs {
  display: flex;
  overflow: hidden;
  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  border-radius: $border-radius-medium;
}

/**
 * @summary Tab navigation container element
 * @selector .slds-vertical-tabs__nav
 * @restrict .slds-vertical-tabs > ul
 */
.slds-vertical-tabs__nav {
  width: $size-x-small;
  border-right: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
}

/**
 * @summary Tab navigation item
 * @selector .slds-vertical-tabs__nav-item
 * @restrict .slds-vertical-tabs__nav li
 */
.slds-vertical-tabs__nav-item {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  color: var(--slds-g-color-neutral-base-30, #{$color-text-action-label});

  &:last-child {
    margin-bottom: -1px;
  }

  &:focus-within {
    box-shadow: var(--_slds-g-shadow-inset-focus, #{$shadow-button-focus});
    outline: 0;
  }
}

/**
 * @summary Tab Navigation Link
 * @selector .slds-vertical-tabs__link
 * @restrict .slds-vertical-tabs__nav-item a
 */
.slds-vertical-tabs__link {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  min-width: 0;
  padding: $spacing-small;
  color: currentColor;

  &:hover {
    background: var(--slds-g-color-neutral-base-80, #{$color-background-path-incomplete-hover});
    color: var(--slds-g-color-neutral-base-10, #{$color-text-action-label-active});
    text-decoration: none;
  }

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

/**
 * @summary Left icon inside of vertical tabs nav item
 * @selector .slds-vertical-tabs__left-icon
 * @restrict .slds-vertical-tabs__nav-item span
 */
.slds-vertical-tabs__left-icon {
  margin-right: $spacing-x-small;

  &:empty {
    margin-right: 0;
  }
}

/**
 * @summary Right icon inside of vertical tabs nav item
 * @selector .slds-vertical-tabs__right-icon
 * @restrict .slds-vertical-tabs__nav-item span
 */
.slds-vertical-tabs__right-icon {
  margin-left: auto;
}

/**
 * @summary Tab Content Container
 * @selector .slds-vertical-tabs__content
 * @restrict .slds-vertical-tabs div
 */
.slds-vertical-tabs__content {
  flex: 1;
  padding: $spacing-medium;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
}

/**
 * @name item-active
 * @summary Active state for a tab navigation item
 * @selector .slds-is-active
 * @restrict .slds-vertical-tabs__nav-item
 * @notes Required on the `<li>` element that is associated with the current active tab
 * @modifier
 * @group interactions
 */
.slds-vertical-tabs__nav-item.slds-is-active {
  margin-right: -1px;
  border-right: 0;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  color: $brand-text-link;

  .slds-vertical-tabs__link:hover {
    background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
    color: currentColor;
  }
}

/**
 * @name item-focus
 * @summary Focus state for a tab navigation item
 * @selector .slds-has-focus
 * @restrict .slds-vertical-tabs__nav-item
 * @modifier
 * @group interactions
 */
.slds-vertical-tabs__nav-item.slds-has-focus {
  text-decoration: none;
}