/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * @summary Initializes a default tablist
 */
.slds-tabs_default {
  display: block;
  width: 100%;

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

/**
  * @summary Creates the container for the default tabs
  */
.slds-tabs_default__nav {
  display: flex;
  align-items: flex-start;
  border-block-end-width: var(--slds-c-tabs-list-sizing-border, var(--slds-g-sizing-border-1));
  border-block-end-style: solid;
  border-block-end-color: var(
    --slds-c-tabs-list-color-border,
    var(--slds-s-navigation-color-border, var(--slds-g-color-border-1))
  );
}

/**
  * @summary Styles each list item as a single tab
  */
.slds-tabs_default__item {
  color: var(--slds-c-tabs-item-text-color, var(--slds-s-navigation-color, var(--slds-g-color-on-surface-2)));
  position: relative;
  padding-block-start: var(--slds-c-tabs-item-spacing-block-start, 0);
  padding-inline-end: var(--slds-c-tabs-item-spacing-inline-end, var(--slds-g-spacing-3));
  padding-block-end: var(--slds-c-tabs-item-spacing-block-end, 0);
  padding-inline-start: var(--slds-c-tabs-item-spacing-inline-start, var(--slds-g-spacing-3));
  margin-block-end: calc(var(--slds-c-tabs-list-sizing-border, var(--slds-c-tabs-list-sizing-border)) * -1);
  font-weight: var(--slds-s-navigation-font-weight);
  font-size: var(--slds-g-font-scale-var-1);

  &::after {
    display: block;
    content: '';
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 0;
    position: absolute;
  }

  /**
    * @summary Active state for a tab item
    */
  &.slds-is-active {
    --slds-c-tabs-item-text-color: var(
      --slds-c-tabs-item-text-color-active,
      var(--slds-s-navigation-color-active, var(--slds-g-color-on-surface-3))
    );

    &::after {
      background-color: var(--slds-c-tabs-item-color-border-active, var(--slds-g-color-accent-2));
      height: var(--slds-c-tabs-list-sizing-border, var(--slds-s-navigation-sizing-border-active));
    }

    .slds-tabs_default__link {
      font-weight: var(--slds-s-navigation-font-weight-active);

      &:hover {
        color: currentColor;
      }
    }
  }

  &:hover {
    color: var(--slds-s-navigation-color-hover);

    &::after {
      height: var(--slds-c-tabs-list-sizing-border, var(--slds-s-navigation-sizing-border-hover));
      background-color: var(
        --slds-c-tabs-item-color-border-hover,
        var(--slds-s-navigation-color-border-hover, var(--slds-g-color-accent-3))
      );
    }
  }

  /**
    * @summary Focus state for a tab item
    */
  &:focus-visible {
    outline: 0;

    &::after {
      height: var(--slds-c-tabs-list-sizing-border, var(--slds-s-navigation-sizing-border-active));
      background-color: var(--slds-c-tabs-item-color-border-active, var(--slds-g-color-accent-2));
    }
  }

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

  &:has(.slds-tabs_default__link:focus-visible) {
    outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
    outline-offset: -6px;
  }

  /**
   * @summary Creates styles for a Tab Item when its tab has new activity in
   */
  &.slds-has-notification {
    background: var(--slds-g-color-surface-container-2);

    &::after {
      background-color: var(--slds-g-color-border-1);
    }

    &:hover {
      &::after {
        background-color: var(--slds-g-color-accent-3);
      }
    }

    .slds-indicator_unread {
      display: inline-block;
      height: 0.375rem;
      width: 0.375rem;
      position: relative;
      inset-block-start: auto;
      inset-inline-start: auto;
    }

    .slds-indicator_unsaved {
      inset-block-start: calc(var(--slds-g-spacing-1) * -1);
    }
  }

  /**
    * @summary Creates styles for a Tab Item when its in an unsaved or dirty state
    */
  &.slds-is-unsaved {
    .slds-indicator_unread {
      margin-inline-start: -0.35rem;
    }

    .slds-indicator_unsaved {
      color: var(--slds-g-color-accent-3);
    }
  }
}

/**
  * @summary Styles each actionable element inside each tab item
  */
.slds-tabs_default__link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer; /* needed in case links have no href & use JS */
  height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem));
  line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem));
  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-visible {
    outline: 0;
  }

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

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

/**
  * @summary List item containing the overflow button menu
  */
.slds-tabs_default__overflow-button {
  display: inline-flex;
  height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem));
  line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem));

  .slds-button {
    line-height: inherit;
    color: var(--slds-c-tabs-item-text-color, var(--slds-g-color-on-surface-1));
    box-shadow: none;
    --slds-c-button-color-border-active: transparent;

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

  &.slds-has-error,
  &.slds-has-success {
    .slds-button {
      color: var(--slds-g-color-neutral-base-100);
    }
  }
}

/**
  * @summary Styles each tab content wrapper
  */
.slds-tabs_default__content {
  position: relative;
  padding-block-start: var(
    --slds-c-tabs-panel-spacing-block-start,
    var(--slds-c-tabs-panel-spacing-block, var(--slds-g-spacing-3))
  );
  padding-inline-end: var(--slds-c-tabs-panel-spacing-inline-end, var(--slds-c-tabs-panel-spacing-inline, 0));
  padding-block-end: var(
    --slds-c-tabs-panel-spacing-block-end,
    var(--slds-c-tabs-panel-spacing-block, var(--slds-g-spacing-3))
  );
  padding-inline-start: var(
    --slds-c-tabs-panel-spacing-inline-start,
    var(--slds-c-tabs-panel-spacing-inline, 0)
  );
}

.slds-tabs_medium {
  .slds-tabs_default__item,
  .slds-tabs_scoped__link {
    font-size: var(--slds-g-font-scale-var-2);
  }

  .slds-tabs_scoped__link {
    padding-inline: var(--slds-g-spacing-var-inline-6);
  }
}

.slds-tabs_large {
  .slds-tabs_default__item,
  .slds-tabs_scoped__link {
    font-size: var(--slds-g-font-scale-var-3);
  }

  .slds-tabs_scoped__link {
    padding-inline: var(--slds-g-spacing-var-inline-6);
  }
}

.slds-tabs__left-icon {
  margin-inline-end: var(--slds-g-spacing-2);

  &:empty {
    margin-inline-end: 0;
  }
}

.slds-tabs__right-icon {
  margin-inline-start: var(--slds-g-spacing-2);
}

/*
 * Scoped Tabs
 */
/**
 * 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.
 */
.slds-tabs_scoped {
  display: block;
  width: 100%;
}

/**
  * @summary Creates the container for the default tabs
  */
.slds-tabs_scoped__nav {
  display: flex;
  align-items: flex-start;
  background-color: var(--slds-s-navigation-color-background);
  border: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border);
  border-start-start-radius: var(--slds-s-navigation-radius-border);
  border-start-end-radius: var(--slds-s-navigation-radius-border);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

/**
  * @summary Styles each list item as a single tab
  */
.slds-tabs_scoped__item {
  position: relative;
  margin-block-end: calc(var(--slds-g-sizing-border-1) * -1);

  & + .slds-tabs_scoped__item {
    margin-inline-start: calc(var(--slds-g-sizing-border-1) * -1);
  }

  &:first-child .slds-tabs_scoped__link {
    border-inline-start: 0;
    border-start-start-radius: var(--slds-s-navigation-radius-border);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }

  .slds-tabs_scoped__link:focus-visible {
    outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
    outline-offset: -4px;
  }
}

/**
  * @summary Styles each tab content wrapper
  */
.slds-tabs_scoped__content {
  background-color: var(--slds-s-navigation-color-background-active);
  border: var(--slds-g-sizing-border-1) solid
    var(--slds-s-navigation-color-border, var(--slds-g-color-border-1));
  border-block-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: var(--slds-s-navigation-radius-border);
  border-end-start-radius: var(--slds-s-navigation-radius-border);
  padding: var(--slds-g-spacing-4);
}

/**
  * @summary Styles each actionable element inside each tab item
  */
.slds-tabs_scoped__link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-decoration: none;
  cursor: pointer;
  height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem));
  line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem));
  padding-block: 0;
  padding-inline: var(--slds-g-spacing-4);
  color: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-1));
  font-weight: var(--slds-s-navigation-font-weight);
  background-clip: padding-box;
  border: 0;
  border-inline-start: var(--slds-g-sizing-border-1) solid transparent;
  border-inline-end: var(--slds-g-sizing-border-1) solid transparent;
  border-block-end: var(--slds-g-sizing-border-1) solid transparent;
  border-radius: 0;

  &:hover,
  &:focus {
    outline: 0;
    text-decoration: none;
    color: currentColor;
    background-color: var(--slds-s-navigation-color-background-hover);
    border-color: var(--slds-s-navigation-color-border, var(--slds-g-color-border-1));
  }
}

/**
  * @summary List item containing the overflow button menu
  */
.slds-tabs_scoped__overflow-button {
  display: inline-flex;
  height: var(--slds-c-tabs-item-sizing-height, var(--slds-s-navigation-sizing-height, 2.5rem));
  line-height: var(--slds-c-tabs-item-font-lineheight, var(--slds-s-navigation-font-lineheight, 2.5rem));

  .slds-button {
    line-height: inherit;
    color: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-1));
    padding-block: 0;
    padding-inline: var(--slds-g-spacing-4);
    font-weight: var(--slds-s-navigation-font-weight);
    --slds-c-button-color-background-hover: transparent;
    --slds-c-button-shadow-focus: none;
    --slds-c-button-radius-border: 0;

    &:focus-visible {
      outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
      outline-offset: -6px;
    }

    &:active {
      box-shadow: none;
    }
  }
}

/**
  * @summary Active state for a tab item
  */
.slds-is-active .slds-tabs_scoped__link {
  background-color: var(--slds-s-navigation-color-background-active);
  border-color: var(--slds-s-navigation-color-border, var(--slds-g-color-border-1));
  font-weight: var(--slds-s-navigation-font-weight-active);
  color: var(--slds-s-navigation-color-active, var(--slds-g-color-on-surface-3));
  border-block-end: none;

  &:hover {
    border-bottom-color: transparent;
  }
}

/**
 * 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.
 */
.slds-vertical-tabs {
  display: flex;
  overflow: hidden;
  border: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border);
  border-radius: var(--slds-g-radius-border-2);
}

/**
 * @summary Tab navigation container element
 */
.slds-vertical-tabs__nav {
  width: var(--slds-g-sizing-14);
  border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border);
  background: var(--slds-s-navigation-color-background);
}

/**
 * @summary Tab navigation item
 */
.slds-vertical-tabs__nav-item {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-s-navigation-color-border);
  color: var(--slds-s-navigation-color);

  &:last-child {
    margin-block-end: -1px;
  }
}

/**
 * @summary Tab Navigation Link
 */
.slds-vertical-tabs__link {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  min-width: 0;
  padding: var(--slds-g-spacing-3);
  color: currentColor;
  font-weight: var(--slds-s-navigation-font-weight);

  &:hover {
    background: var(--slds-s-navigation-color-background-hover);
    color: var(--slds-g-color-on-surface-3);
    text-decoration: none;
  }

  &:focus {
    outline: 0;
    color: currentColor;
  }

  &:focus-visible {
    outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
    outline-offset: -6px;
    text-decoration: none;
  }
}

/**
 * @summary Left icon inside of vertical tabs nav item
 */
.slds-vertical-tabs__left-icon {
  margin-inline-end: var(--slds-g-spacing-2);

  &:empty {
    margin-inline-end: 0;
  }
}

/**
 * @summary Right icon inside of vertical tabs nav item
 */
.slds-vertical-tabs__right-icon {
  margin-inline-start: auto;
}

/**
 * @summary Tab Content Container
 */
.slds-vertical-tabs__content {
  flex: 1;
  padding: var(--slds-g-spacing-3);
  background: var(--slds-s-navigation-color-background-active);
}

/**
 * @summary Active state for a tab navigation item
 */
.slds-vertical-tabs__nav-item.slds-is-active {
  margin-inline-end: -1px;
  border-inline-end: 0;
  background: var(--slds-s-navigation-color-background-active);
  color: var(--slds-s-navigation-color-active);

  .slds-vertical-tabs__link:hover {
    background: var(--slds-s-navigation-color-background-active);
    color: currentColor;
  }

  .slds-vertical-tabs__link {
    font-weight: var(--slds-s-navigation-font-weight-active);
  }
}

/**
 * @summary Focus state for a tab navigation item
 */
.slds-vertical-tabs__nav-item:has(:focus-visible) {
  text-decoration: none;
}

/*
 * Sub Tabs
 */

/**
 * @summary Subtabs
 */

.slds-sub-tabs .slds-tabs_default__nav {
  background-color: var(--slds-g-color-surface-container-1);
  border-block-end-width: var(--slds-g-sizing-border-1);
}

/**
 * @summary Subtab item
 */
.slds-sub-tabs__item {
  text-transform: none;
  letter-spacing: 0;
  margin-block-end: 0;
  font-weight: normal;

  &.slds-active,
  &.slds-is-open {
    background-color: var(
      --_slds-c-globalnavigation-subtab-color-background-active,
      var(--slds-g-color-accent-light-1)
    );
    color: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-1));

    .slds-button__icon,
    .slds-icon {
      fill: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-1));
    }

    &:hover {
      background-color: var(
        --_slds-c-globalnavigation-subtab-color-background-active,
        var(--slds-g-color-accent-light-1)
      );
    }
  }

  &::after {
    content: none;
  }

  &:hover {
    background-color: var(
      --_slds-c-globalnavigation-subtab-color-background-hover,
      var(--slds-g-color-accent-light-1)
    );
  }

  .slds-tabs_default__link:focus-visible {
    text-decoration: none;
  }

  & + .slds-sub-tabs__item {
    margin-inline-start: 0;
  }

  .slds-icon_container {
    --slds-c-icon-color-background: transparent;
    --slds-c-icon-color-foreground: var(--slds-g-color-on-surface-1);
  }

  .slds-button__icon,
  .slds-icon {
    fill: var(--slds-g-color-on-surface-1);
  }

  /**
   * @summary Success notification on a subtab
   */
  &.slds-has-success {
    color: var(--slds-g-color-on-success-1);

    .slds-button__icon,
    .slds-icon {
      fill: var(--slds-g-color-on-success-1);
    }

    &::before {
      animation-duration: 1s;
      animation-iteration-count: 3;
      animation-timing-function: linear;
      background-color: var(--slds-g-color-success-container-1);
      inset-block-end: 0;
      content: ' ';
      inset-inline-start: 0;
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 0;
      transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
      animation-name: success-pulse;
    }

    &:hover::before {
      background-color: var(--slds-g-color-success-container-2);
    }

    .slds-indicator_unread {
      background-color: currentColor;
    }

    .slds-indicator_unsaved {
      color: currentColor;
    }
  }

  /**
   * @summary Error notification on a subtab
   */
  &.slds-has-error {
    color: var(--slds-g-color-on-error-1);

    .slds-button__icon,
    .slds-icon {
      fill: var(--slds-g-color-on-error-1);
    }

    &::before {
      animation-duration: 1s;
      animation-iteration-count: 3;
      animation-timing-function: linear;
      background-color: var(--slds-g-color-error-container-1);
      inset-block-end: 0;
      content: ' ';
      inset-inline-start: 0;
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 0;
      transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
      animation-name: error-pulse;
    }

    &:hover::before {
      background-color: var(--slds-g-color-error-container-2);
    }

    .slds-indicator_unread {
      background-color: currentColor;
    }

    .slds-indicator_unsaved {
      color: currentColor;
    }
  }

  /**
   * @summary Warning notification on a subtab
   */
  &.slds-has-warning {
    color: var(--slds-g-color-on-warning-1);

    .slds-button__icon,
    .slds-icon {
      fill: var(--slds-g-color-on-warning-1);
    }

    &::before {
      animation-duration: 1s;
      animation-iteration-count: 3;
      animation-timing-function: linear;
      background-color: var(--slds-g-color-warning-container-1);
      inset-block-end: 0;
      content: ' ';
      inset-inline-start: 0;
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 0;
      transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
      animation-name: warning-pulse;
    }

    &:hover::before {
      background-color: var(--slds-g-color-warning-base-80);
    }

    .slds-indicator_unread {
      background-color: currentColor;
    }

    .slds-indicator_unsaved {
      color: currentColor;
    }
  }

  &.slds-has-warning,
  &.slds-has-error,
  &.slds-has-success {
    &:has(.slds-tabs_default__link:focus-visible)::before {
      box-shadow: var(--slds-g-shadow-insetinverse-focus-1);
    }
  }

  &:has(.slds-tabs_default__link:focus-visible) {
    outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
    outline-offset: -6px;
  }
}

.slds-has-pinned-regions {
  .slds-sub-tabs__item {
    &.slds-active,
    &.slds-is-open {
      &::before {
        content: '';
        height: 3px;
        display: block;
        background: var(--slds-g-color-accent-2);
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: -1px;
        inset-inline-end: -1px;
      }
    }
  }
}

/**
 * Scrolling
 */
.slds-tab__scroll-controls {
  display: none;
}

/**
 * Mobile
 *
 * Out of scope for 254, but porting over classes so in SLDS2 they do
 * not render broken when app.css/SLDS1 is not present. Below is just
 * filling in the gaps as a redundancy, NOT official support, hence
 * why these are not surfaced in SB or elsewhere.
 */

/**
 * Container to hold mobile tabs and their panels
 */
.slds-tabs-mobile__container {
  position: relative;
  overflow: hidden;
}

.slds-panel__body .slds-tabs-mobile:first-child {
  margin-block-start: calc(var(--slds-g-spacing-3) * -1);
}

.slds-panel__body .slds-tabs-mobile:first-child .slds-tabs-mobile__item:first-child {
  border-block-start: 0;
}

.slds-panel__body .slds-tabs-mobile {
  margin-inline-start: calc(var(--slds-g-spacing-3) * -1);
  margin-inline-end: calc(var(--slds-g-spacing-3) * -1);
}

/**
 * Styles the list of tabs for the mobile tab set
 */
.slds-tabs-mobile {
  display: flex;
  flex-direction: column;
  background-color: var(--slds-g-color-surface-container-1);
}

/**
 * Styles each list item as a single drill-in tab
 */
.slds-tabs-mobile__item {
  display: flex;
  border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4));
  align-items: stretch;
  color: var(--slds-g-color-on-surface-3);
  font-size: var(--slds-g-font-scale-2);
  padding: 0 var(--slds-g-spacing-3);
}

.slds-tabs-mobile__item:active {
  background-color: var(--slds-g-color-surface-container-2);
}

.slds-tabs-mobile__item:last-child {
  border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
}

/**
 * Wrapper for adjacent mobile tab sets
 */
.slds-tabs-mobile__group
  .slds-tabs-mobile__container
  + .slds-tabs-mobile__container
  .slds-tabs-mobile__item:first-child {
  border-block-start: 0;
}