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

/**
 * @summary Initializes a default tablist
 *
 * @name base
 * @selector .slds-tabs_default
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-tabs_default,
.slds-tabs--default {
  display: block;
  width: 100%;

  /**
   * @summary A tab item that has an overflow menu
   * @selector .slds-tabs__item_overflow
   * @restrict .slds-tabs_default__item
   */
  .slds-tabs__item_overflow,
  .slds-tabs__item--overflow {
    overflow: visible;
  }
}

/**
 * @summary Creates the container for the default tabs
 * @selector .slds-tabs_default__nav
 * @restrict .slds-tabs_default ul
 */
.slds-tabs_default__nav,
.slds-tabs--default__nav {
  display: flex;
  align-items: flex-start;
  border-bottom-width: var(--slds-c-tabs-list-sizing-border, var(--sds-c-tabs-list-sizing-border, $border-width-thin));
  border-bottom-style: solid;
  border-bottom-color: var(--slds-c-tabs-list-color-border, var(--sds-c-tabs-list-color-border, var(--slds-g-color-border-base-4, #{$color-border})));
}

/**
 * @summary Styles each list item as a single tab
 * @selector .slds-tabs_default__item
 * @restrict .slds-tabs_default ul li
 */
.slds-tabs_default__item,
.slds-tabs--default__item {
  color: var(--slds-c-tabs-item-text-color, var(--sds-c-tabs-item-text-color, var(--slds-g-color-neutral-base-30, #{$color-text-action-label})));
  position: relative;
  padding-top: var(--slds-c-tabs-item-spacing-block-start, var(--slds-c-tabs-item-spacing-blockstart,var(--slds-c-tabs-item-spacing-block, var(--sds-c-tabs-item-spacing-block-start, var(--sds-c-tabs-item-spacing-block, 0)))));
  padding-right: var(--slds-c-tabs-item-spacing-inline-end, var(--slds-c-tabs-item-spacing-inlineend,var(--slds-c-tabs-item-spacing-inline, var(--sds-c-tabs-item-spacing-inline-end, var(--sds-c-tabs-item-spacing-inline, $spacing-small)))));
  padding-bottom: var(--slds-c-tabs-item-spacing-block-end, var(--slds-c-tabs-item-spacing-blockend,var(--slds-c-tabs-item-spacing-block, var(--sds-c-tabs-item-spacing-block-end, var(--sds-c-tabs-item-spacing-block, 0)))));
  padding-left: var(--slds-c-tabs-item-spacing-inline-start, var(--slds-c-tabs-item-spacing-inlinestart,var(--slds-c-tabs-item-spacing-inline, var(--sds-c-tabs-item-spacing-inline-start, var(--sds-c-tabs-item-spacing-inline, $spacing-small)))));
  margin-bottom: calc(var(--slds-c-tabs-list-sizing-border, var(--sds-c-tabs-list-sizing-border, #{$border-width-thin})) * -1);

  &:has(:focus-visible) {
    outline: 2px solid var(--slds-g-color-brand-base-40, #{$palette-blue-40});
    outline-offset: rem(-6px);
  }

  &:after {
    display: block;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    position: absolute;
  }

  /**
   * @summary Active state for a tab item
   * @selector .slds-is-active
   * @restrict .slds-tabs_default__item
   * @notes Required on the `<li>` element that is associated with the active tab panel
   * @modifier
   */
  &.slds-active,
  &.slds-is-active {
    /*! @css-var-fallback color */
    --slds-c-tabs-item-text-color: var(--slds-c-tabs-item-text-color-active,
      var(--sds-c-tabs-item-text-color-active, var(--slds-g-color-neutral-base-10, #{$color-text-action-label-active})));

    &:after {
      background-color: var(--slds-c-tabs-item-color-border-active, var(--sds-c-tabs-item-color-border-active, $brand-primary));
      height: calc(var(--slds-c-tabs-list-sizing-border, var(--sds-c-tabs-list-sizing-border, #{$border-width-thin})) + 2px);
    }

    .slds-tabs_default__link,
    .slds-tabs--default__link {
      font-weight: $tabs-font-weight;

      &:hover {
        color: currentColor;
      }
    }
  }

  &:hover:after {
    height: calc(var(--slds-c-tabs-list-sizing-border, var(--sds-c-tabs-list-sizing-border, #{$border-width-thin})) + 1px);
    background-color: var(--slds-c-tabs-item-color-border-hover, var(--sds-c-tabs-item-color-border-hover, $brand-primary-active));
  }

  /**
   * @summary Focus state for a tab item
   * @selector .slds-has-focus
   * @restrict .slds-tabs_default__item
   * @modifier
   */
  &:focus,
  &.slds-has-focus {
    &:after {
      height: calc(var(--slds-c-tabs-list-sizing-border, var(--sds-c-tabs-list-sizing-border, #{$border-width-thick})) + 1px);
      background-color: var(--slds-c-tabs-item-color-border-active, var(--sds-c-tabs-item-color-border-active, $brand-primary));
    }
  }

  &:focus {
    outline: 0;
  }

  // Remove box-shadow when slds-button is used in conjunction with class
  .slds-tabs_default__link:focus,
  .slds-tabs--default__link:focus {
    box-shadow: none;
  }

  /**
  * @summary Creates styles for a Tab Item when its tab has new activity in
  * @selector .slds-has-notification
  * @restrict .slds-tabs_default__item, .slds-dropdown__item
  */
  &.slds-has-notification {
    background: var(--slds-g-color-neutral-base-95, #{$color-background-notification-new});

    &:after {
      background-color: var(--slds-g-color-border-base-4, #{$color-border});
    }

    &:hover {

      &:after {
        background-color: var(--slds-g-color-brand-base-30, #{$color-brand-dark});
      }
    }

    .slds-indicator_unread {
      display: inline-block;
      height: rem(6px);
      width: rem(6px);
      position: relative;
      top: auto;
      left: auto;
    }
  }

  /**
   * @summary Creates styles for a Tab Item when its in an unsaved or dirty state
   * @selector .slds-is-unsaved
   * @restrict .slds-tabs_default__item
   */
  &.slds-is-unsaved {

    .slds-indicator_unread {
      margin-left: -0.35rem; // random but matches spec
    }

    .slds-indicator_unsaved {
      color: $brand-accessible-active;
    }
  }

  &.slds-has-notification {

    .slds-indicator_unsaved {
      top: rem(-4px);
    }
  }
}

/**
 * @summary Styles each actionable element inside each tab item
 * @selector .slds-tabs_default__link
 * @restrict .slds-tabs_default__item a, .slds-tabs_default__item button
 */
.slds-tabs_default__link,
.slds-tabs--default__link {
  @include truncate;
  display: block;
  text-decoration: none;
  cursor: pointer; // needed in case links have no href & use JS
  height: var(--slds-c-tabs-item-sizing-height, var(--sds-c-tabs-item-sizing-height, $line-height-tab));
  line-height: var(--slds-c-tabs-item-line-height, var(--sds-c-tabs-item-line-height, $line-height-tab));
  color: currentColor;
  border: 0;
  text-transform: inherit; // For button menu to inherit the parents text-transform
  z-index: 1; // For subtab notification background coloring

  &:focus,
  &:focus-visible {
    outline: 0;
  }

  &:hover,
  &:focus {
    text-decoration: none;
    box-shadow: none;
    color: currentColor;
  }

  &[tabindex="0"]:focus {
    text-decoration: none;
  }
}

/**
 * @summary List item containing the overflow button menu
 * @selector .slds-tabs_default__overflow-button
 * @restrict .slds-tabs_default__item
 */
.slds-tabs_default__overflow-button {
  display: inline-flex;
  height: var(--slds-c-tabs-item-sizing-height, var(--sds-c-tabs-item-sizing-height, $line-height-tab));
  line-height: var(--slds-c-tabs-item-line-height, var(--sds-c-tabs-item-line-height, $line-height-tab));

  .slds-button {
    line-height: inherit;
    color: var(--slds-c-tabs-item-text-color, var(--sds-c-tabs-item-text-color, var(--slds-g-color-neutral-base-30, #{$color-text-action-label})));
    --slds-c-button-color-border-active: transparent;
    
    &:focus,
    &:focus-visible {
      text-decoration: none;
      outline: 0;
      box-shadow: none;
    }
  }

  &.slds-has-error,
  &.slds-has-success {

    .slds-button {
      color: var(--slds-g-color-neutral-base-100, #{$color-gray-1});
    }
  }

  &.slds-has-error,
  &.slds-has-success,
  &.slds-has-warning {
    .slds-button:focus {
      box-shadow: var(--slds-g-shadow-outset-focus-1);
    }
  }
}

/**
 * @summary Styles each tab content wrapper
 * @selector .slds-tabs_default__content
 * @restrict .slds-tabs_default div
 */
.slds-tabs_default__content,
.slds-tabs--default__content {
  position: relative;
  padding-top:
    var(--slds-c-tabs-panel-spacing-block-start,
    var(--slds-c-tabs-panel-spacing-blockstart,
    var(--sds-c-tabs-panel-spacing-block-start,
    var(--slds-c-tabs-panel-spacing-block,
    var(--sds-c-tabs-panel-spacing-block, $spacing-small)))));
  padding-right:
    var(--slds-c-tabs-panel-spacing-inline-end,
    var(--slds-c-tabs-panel-spacing-inlineend,
    var(--sds-c-tabs-panel-spacing-inline-end,
    var(--slds-c-tabs-panel-spacing-inline,
    var(--sds-c-tabs-panel-spacing-inline, 0)))));
  padding-bottom:
    var(--slds-c-tabs-panel-spacing-block-end,
    var(--slds-c-tabs-panel-spacing-blockend,
    var(--sds-c-tabs-panel-spacing-block-end,
    var(--slds-c-tabs-panel-spacing-block,
    var(--sds-c-tabs-panel-spacing-block, $spacing-small)))));
  padding-left:
    var(--slds-c-tabs-panel-spacing-inline-start,
    var(--slds-c-tabs-panel-spacing-inlinestart,
    var(--sds-c-tabs-panel-spacing-inline-start,
    var(--slds-c-tabs-panel-spacing-inline,
    var(--sds-c-tabs-panel-spacing-inline, 0)))));
}

/**
 * @summary Applies bold font weight to header
 * @selector .slds-tabs_default__header
 * @restrict .slds-tabs_default div
  */
.slds-tabs_default {

  .slds-tabs_default__header {
    font-weight: bold;
  }
}

/**
 * @name default
 * @summary Default sized tabs
 * @selector .slds-tabs_default
 * @modifier
 * @group size
 */
 .slds-tabs_default {

  .slds-tabs_default__header:not(.slds-assistive-text) {
    font-size: $var-font-size-3;

    + .slds-tabs_default__nav .slds-tabs_default__item {
      font-size: $var-font-size-2;
    }
  }

  .slds-tabs_default__item {
    font-size: $var-font-size-3;
  }
}

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

  .slds-tabs_default__header {
    font-size: $var-font-size-5;

    + .slds-tabs_default__nav .slds-tabs_default__item {
      font-size: $var-font-size-4;
    }
  }

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

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

  .slds-tabs_default__header {
    font-size: $var-font-size-7;

    + .slds-tabs_default__nav .slds-tabs_default__item {
      font-size: $var-font-size-6;
    }
  }

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

/**
 * @summary
 * @selector .slds-tabs__left-icon
 * @restrict .slds-tabs_default__item span
 */
.slds-tabs__left-icon {
  margin-right: $spacing-x-small;

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

/**
 * @summary
 * @selector .slds-tabs__right-icon
 * @restrict .slds-tabs_default__item span
 */
.slds-tabs__right-icon {
  margin-left: $spacing-x-small;
}

.slds-tabs_default__nav {

  .slds-has-error,
  .slds-has-warning,
  .slds-has-success {
    .slds-tabs_default__link {
      &:focus-visible {
        box-shadow: var(--slds-g-shadow-inset-focus-1);
        outline: 0;
        text-decoration: none;
      }
    }

    .slds-button:focus {
      box-shadow: var(--slds-g-shadow-inset-focus-1);
    }
  }
}