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

@import 'deprecate';

/**
 * 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
 * @support dev-ready
 * @variant
 */
.slds-tabs_scoped,
.slds-tabs--scoped {
  @include tabs;
}


/**
 * @summary Creates the container for the default tabs
 * @selector .slds-tabs_scoped__nav
 * @restrict .slds-tabs_scoped ul
 */
.slds-tabs_scoped__nav,
.slds-tabs--scoped__nav {
  @include tabs-nav;
  background-color: var(--slds-g-color-neutral-base-95, #{$color-gray-2});
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border-button-default});
  border-top-left-radius: $border-radius-medium;
  border-top-right-radius: $border-radius-medium;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/**
 * @summary Styles each list item as a single tab
 * @selector .slds-tabs_scoped__item
 * @restrict .slds-tabs_scoped ul li
 */
.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: 0;
  }
}

/**
 * @summary Styles each tab content wrapper
 * @selector .slds-tabs_scoped__content
 * @restrict .slds-tabs_scoped div
 */
.slds-tabs_scoped__content,
.slds-tabs--scoped__content {
  background-color: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border-button-default});
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: $border-radius-medium;
  border-bottom-left-radius: $border-radius-medium;
  padding: $spacing-medium;
}

/**
 * @summary Styles each actionable element inside each tab item
 * @selector .slds-tabs_scoped__link
 * @restrict .slds-tabs_scoped__item a, .slds-tabs_scoped__item button
 */
.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: var(--slds-g-color-neutral-base-30, #{$color-text-action-label});
  background-clip: padding-box;
  border: 0;
  border-left: $border-width-thin solid transparent;
  border-right: $border-width-thin solid transparent;
  border-radius: 0;

  &:hover,
  &:focus {
    text-decoration: none;
    color: currentColor;
    border-color: var(--slds-g-color-border-base-4, #{$color-border});
  }

  &:focus {
    outline: 2px solid var(--slds-g-color-brand-base-40);
    outline-offset: rem(-4px);
  }
}

/**
 * @summary List item containing the overflow button menu
 * @selector .slds-tabs_scoped__overflow-button
 * @restrict .slds-tabs_scoped__item
 */
.slds-tabs_scoped__overflow-button {
  display: inline-flex;
  height: $line-height-tab;
  line-height: $line-height-tab;

  .slds-button {
    line-height: inherit;
    color: var(--slds-g-color-neutral-base-30, #{$color-text-action-label});
    padding: 0 $spacing-medium;

    &:focus {
      outline: 0;
      box-shadow: var(--slds-g-shadow-inset-focus-1);
    }
  }
}

/**
 * @name active
 * @summary 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
 * @group visibility
 */
.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: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  border-color: var(--slds-g-color-border-base-4, #{$color-border});
  font-weight: $tabs-font-weight;
  color: var(--slds-g-color-neutral-base-10, #{$color-text-action-label-active});
}

/**
 * @name medium
 * @summary Medium sized tabs
 * @selector .slds-tabs_medium
 * @restrict .slds-tabs_scoped
 * @modifier
 * @group size
 */
.slds-tabs_medium {

  .slds-tabs_scoped__item {
    font-size: $var-font-size-5;
  }

  .slds-tabs_scoped__link {
    padding-left: $var-spacing-horizontal-large;
    padding-right: $var-spacing-horizontal-large;
  }
}

/**
 * @name large
 * @summary Large sized tabs
 * @selector .slds-tabs_large
 * @restrict .slds-tabs_scoped
 * @modifier
 * @group size
 */
.slds-tabs_large {

  .slds-tabs_scoped__item {
    font-size: $var-font-size-7;
  }

  .slds-tabs_scoped__link {
    padding-left: $var-spacing-horizontal-x-large;
    padding-right: $var-spacing-horizontal-x-large;
  }
}