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

/**
 * A scoped tabset style has a closed container with a defined border. Initialize
 * a scoped tab set by applying the `.slds-tab--scoped` class to the containing
 * `<div>` around the tab list and tab panels. The `<ul>` element also requires
 * the class `.slds-tab--scoped__nav` to prevent styles from bleeding into nested tabs.
 *
 * @summary Initializes scoped tabs
 *
 * @name base
 * @selector .slds-tabs_scoped
 * @restrict div
 * @required
 * @variant
 */
.slds-tabs_scoped,
.slds-tabs--scoped {
  @include tabs;

  /**
   * Creates the container for the default tabs
   *
   * @selector .slds-tabs_scoped__nav
   * @restrict .slds-tabs_scoped ul
   * @required
   */
  &__nav {
    @include tabs-nav;
    background-color: $color-background;
    border: $border-width-thin solid $color-border-button-default;
    border-radius: $border-radius-medium $border-radius-medium 0 0;
  }

  @include deprecate('4.0.0') {

    .slds-tabs__item {
      position: relative;
      margin-bottom: ($border-width-thin * -1);

      + .slds-tabs__item {
        margin-left: ($border-width-thin * -1);
      }

      &:first-child > a {
        border-left: 0;
        border-radius: $border-radius-medium 0 0 0;
      }

      > a {
        @include tabs-link;
        height: $line-height-tab;
        line-height: $line-height-tab;
        padding: 0 $spacing-large;
        color: $color-text-weak;
        background-clip: padding-box;
        border: {
          left: $border-width-thin solid transparent;
          right: $border-width-thin solid transparent;
        }

        &:hover,
        &:focus {
          text-decoration: none;
          color: $color-text-link-hover;
          border-color: $color-border;
        }
      }
      // scss-lint:disable SelectorDepth
      .slds-active > a {
        background-color: $color-background-alt;
        color: $color-text-link;
        border-color: $color-border;

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

    > .slds-tabs__content {
      background-color: $color-background-alt;
      border: $border-width-thin solid $color-border-button-default;
      border-top: 0;
      border-radius: 0 0 $border-radius-medium $border-radius-medium;
      padding: $spacing-medium;
    }
  }
}
/**
 * Styles each list item as a single tab
 *
 * @selector .slds-tabs_scoped__item
 * @restrict .slds-tabs_scoped ul li
 * @required
 */
.slds-tabs_scoped__item,
.slds-tabs--scoped__item {
  position: relative;
  margin-bottom: ($border-width-thin * -1);

  + .slds-tabs_scoped__item,
  + .slds-tabs--scoped__item {
    margin-left: ($border-width-thin * -1);
  }

  &:first-child .slds-tabs_scoped__link,
  &:first-child .slds-tabs--scoped__link {
    border-left: 0;
    border-radius: $border-radius-medium 0 0 0;
  }
}

/**
 * Styles each tab content wrapper
 *
 * @selector .slds-tabs_scoped__content
 * @restrict .slds-tabs_scoped div
 * @required
 */
.slds-tabs_scoped__content,
.slds-tabs--scoped__content {
  background-color: $color-background-alt;
  border: $border-width-thin solid $color-border-button-default;
  border-top: 0;
  border-radius: 0 0 $border-radius-medium $border-radius-medium;
  padding: $spacing-medium;
}

/**
 * Styles each actionable element inside each tab item
 *
 * @selector .slds-tabs_scoped__link
 * @restrict .slds-tabs_scoped__item a
 * @required
 */
.slds-tabs_scoped__link,
.slds-tabs--scoped__link {
  @include tabs-link;
  height: $line-height-tab;
  line-height: $line-height-tab;
  padding: 0 $spacing-medium;
  color: $color-text-weak;
  background-clip: padding-box;
  border: {
    left: $border-width-thin solid transparent;
    right: $border-width-thin solid transparent;
  }

  &:hover,
  &:focus {
    text-decoration: none;
    color: $color-text-link-hover;
    border-color: $color-border;
  }
}

/**
 * Active state for a tab item
 *
 * @selector .slds-is-active
 * @restrict .slds-tabs_scoped__item
 * @notes Required on the `<li>` element that is associated with the active tab panel
 * @modifier
 */
.slds-active .slds-tabs_scoped__link,
.slds-active .slds-tabs--scoped__link,
.slds-is-active .slds-tabs_scoped__link,
.slds-is-active .slds-tabs--scoped__link {
  background-color: $color-background-alt;
  color: $color-text-link;
  border-color: $color-border;

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