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

@layer theme {
  /* ============================================================
   * SHARED — applies across default, scoped, and vertical tabs.
   * --slds-c-tabs-item-* is the unified customization vocabulary.
   * ============================================================ */
  .slds-tabs_default,
  .slds-tabs_scoped,
  .slds-vertical-tabs {
    /* sizing */
    --slds-c-tabs-item-sizing-height: var(--slds-s-navigation-sizing-height, 2.5rem);
    /* font */
    --slds-c-tabs-item-font-lineheight: var(--slds-s-navigation-font-lineheight, 2.5rem);
    --slds-c-tabs-item-font-size: var(--slds-g-font-scale-var-1);
    --slds-c-tabs-item-font-weight: var(--slds-s-navigation-font-weight);
    --slds-c-tabs-item-font-weight-active: var(--slds-s-navigation-font-weight-active);
    /* color */
    --slds-c-tabs-item-color-foreground: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-2));
    --slds-c-tabs-item-color-foreground-active: var(
      --slds-s-navigation-color-active,
      var(--slds-g-color-on-surface-3)
    );
    --slds-c-tabs-item-color-foreground-hover: var(--slds-s-navigation-color-hover);
    /* focus outline */
    --slds-c-tabs-item-sizing-outline: var(--slds-g-sizing-border-2);
    --slds-c-tabs-item-color-outline: var(--slds-s-link-outline-color);
    --slds-c-tabs-item-outline-offset: -6px;
  }

  /* ============================================================
   * DEFAULT TABS
   * ============================================================ */
  .slds-tabs_default {
    /* nav bar */
    --slds-c-tabs-list-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-tabs-list-color-border: var(--slds-s-navigation-color-border, var(--slds-g-color-border-1));

    /* spacing */
    --slds-c-tabs-item-spacing-inline: var(--slds-g-spacing-3);

    /* active indicator bar — height equals list border so it precisely covers it */
    --slds-c-tabs-item-indicator-sizing-height-active: var(--slds-c-tabs-list-sizing-border);
    --slds-c-tabs-item-indicator-sizing-height-hover: var(--slds-c-tabs-list-sizing-border);
    --slds-c-tabs-item-color-border-active: var(--slds-g-color-accent-2);
    --slds-c-tabs-item-color-border-hover: var(
      --slds-s-navigation-color-border-hover,
      var(--slds-g-color-accent-3)
    );

    /* notification state */
    --slds-c-tabs-item-color-background-notification: var(--slds-g-color-surface-container-2);
    --slds-c-tabs-item-color-border-notification: var(--slds-g-color-border-1);

    /* notification indicator dot */
    --slds-c-tabs-indicator-unread-sizing: 0.375rem;
    --slds-c-tabs-indicator-unsaved-offset-block-start: calc(var(--slds-g-spacing-1) * -1);
    --slds-c-tabs-indicator-unsaved-color-foreground: var(--slds-g-color-accent-3);

    /* panel spacing */
    --slds-c-tabs-panel-spacing-block: var(--slds-g-spacing-3);

    /* icon helpers */
    --slds-c-tabs-icon-left-spacing-inline-end: var(--slds-g-spacing-2);
    --slds-c-tabs-icon-right-spacing-inline-start: var(--slds-g-spacing-2);

    /* overflow button status color (error/success = on-color text) */
    --slds-c-tabs-overflow-color-foreground-status: var(--slds-g-color-neutral-base-100);
  }

  /* ============================================================
   * SCOPED TABS
   * Shared item color/font hooks are set above.
   * Only structural differences need scoped-specific hooks.
   * ============================================================ */
  .slds-tabs_scoped {
    /* nav bar */
    --slds-c-tabs-scoped-nav-color-background: var(--slds-s-navigation-color-background);
    --slds-c-tabs-scoped-nav-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-tabs-scoped-nav-color-border: var(
      --slds-s-navigation-color-border,
      var(--slds-g-color-border-1)
    );
    --slds-c-tabs-scoped-nav-radius-border: var(--slds-s-navigation-radius-border);

    /* content panel */
    --slds-c-tabs-scoped-content-color-background: var(--slds-s-navigation-color-background-active);
    --slds-c-tabs-scoped-content-color-border: var(
      --slds-s-navigation-color-border,
      var(--slds-g-color-border-1)
    );
    --slds-c-tabs-scoped-content-spacing-block: var(--slds-g-spacing-4);
    --slds-c-tabs-scoped-content-spacing-inline: var(--slds-g-spacing-4);

    /* link — structural differences only */
    --slds-c-tabs-scoped-link-spacing-inline: var(--slds-g-spacing-4);
    --slds-c-tabs-scoped-link-color-background-hover: var(--slds-s-navigation-color-background-hover);
    --slds-c-tabs-scoped-link-color-border-hover: var(
      --slds-s-navigation-color-border,
      var(--slds-g-color-border-1)
    );
    --slds-c-tabs-scoped-link-color-background-active: var(--slds-s-navigation-color-background-active);
    --slds-c-tabs-scoped-link-color-border-active: var(
      --slds-s-navigation-color-border,
      var(--slds-g-color-border-1)
    );

    /* focus outline offset (scoped uses tighter inset than default) */
    --slds-c-tabs-scoped-item-outline-offset: -4px;
  }

  /* ============================================================
   * VERTICAL TABS
   * Shared item color/font hooks are set above.
   * Only structural differences need vertical-specific hooks.
   * ============================================================ */
  .slds-vertical-tabs {
    /* container */
    --slds-c-tabs-vertical-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-tabs-vertical-color-border: var(--slds-s-navigation-color-border);
    --slds-c-tabs-vertical-radius-border: var(--slds-g-radius-border-2);

    /* nav sidebar */
    --slds-c-tabs-vertical-nav-sizing-inline: var(--slds-g-sizing-14);
    --slds-c-tabs-vertical-nav-color-background: var(--slds-s-navigation-color-background);

    /* item background — separate from foreground since background varies by state */
    --slds-c-tabs-vertical-item-color-background: transparent;
    --slds-c-tabs-vertical-item-color-background-active: var(--slds-s-navigation-color-background-active);

    /* link */
    --slds-c-tabs-vertical-link-spacing-block: var(--slds-g-spacing-3);
    --slds-c-tabs-vertical-link-spacing-inline: var(--slds-g-spacing-3);
    --slds-c-tabs-vertical-link-color-background: transparent;
    --slds-c-tabs-vertical-link-color-background-hover: var(--slds-s-navigation-color-background-hover);

    /* content */
    --slds-c-tabs-vertical-content-color-background: var(--slds-s-navigation-color-background-active);
    --slds-c-tabs-vertical-content-spacing-block: var(--slds-g-spacing-3);
    --slds-c-tabs-vertical-content-spacing-inline: var(--slds-g-spacing-3);
  }

  /* ============================================================
   * SUBTABS
   * Feedback state colors (success/error/warning) source global
   * tokens directly in the base file — they are not component hooks.
   * ============================================================ */
  .slds-sub-tabs {
    /* nav */
    --slds-c-tabs-subtab-nav-color-background: var(--slds-g-color-surface-container-1);
    /* active / hover */
    --slds-c-tabs-subtab-color-background-active: var(--slds-g-color-accent-light-1);
    --slds-c-tabs-subtab-color-foreground-active: var(--slds-g-color-on-surface-1);
    --slds-c-tabs-subtab-color-background-hover: var(--slds-g-color-accent-light-1);
    /* icon */
    --slds-c-tabs-subtab-icon-color-foreground: var(--slds-g-color-on-surface-1);
    /* focus ring on notification tab */
    --slds-c-tabs-subtab-shadow-focus-notification: var(--slds-g-shadow-insetinverse-focus-1);
    /* pinned regions top indicator */
    --slds-c-tabs-subtab-color-background-pinned-indicator: var(--slds-g-color-accent-2);
    --slds-c-tabs-subtab-sizing-pinned-indicator: 3px;
  }

  /* Pulse animations are a thematic design decision — a different theme may omit them */
  .slds-sub-tabs__item.slds-has-success::before {
    animation-duration: 1s;
    animation-iteration-count: 3;
    animation-timing-function: linear;
    animation-name: success-pulse;
    transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
  }

  .slds-sub-tabs__item.slds-has-error::before {
    animation-duration: 1s;
    animation-iteration-count: 3;
    animation-timing-function: linear;
    animation-name: error-pulse;
    transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
  }

  .slds-sub-tabs__item.slds-has-warning::before {
    animation-duration: 1s;
    animation-iteration-count: 3;
    animation-timing-function: linear;
    animation-name: warning-pulse;
    transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
  }

  /* ============================================================
   * SIZE MODIFIERS — override font-size and scoped link spacing
   * ============================================================ */
  .slds-tabs_medium {
    --slds-c-tabs-item-font-size: var(--slds-g-font-scale-var-2);
    --slds-c-tabs-scoped-link-spacing-inline: var(--slds-g-spacing-var-inline-6);
  }

  .slds-tabs_large {
    --slds-c-tabs-item-font-size: var(--slds-g-font-scale-var-3);
    --slds-c-tabs-scoped-link-spacing-inline: var(--slds-g-spacing-var-inline-6);
  }

  /* ============================================================
   * MOBILE TABS
   * Out of scope for primary SLDS2 support. No theme hooks —
   * values sourced directly from global tokens in the base file.
   * ============================================================ */
  .slds-tabs-mobile {
    --slds-c-tabs-mobile-panel-offset-block-start: var(--slds-g-spacing-3);
    --slds-c-tabs-mobile-panel-offset-inline: var(--slds-g-spacing-3);
  }
}