/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 *
 * Lightning Blue theme for Menu (.slds-dropdown). Defines every public
 * --slds-c-dropdown-* hook the theme-layer base reads, plus variant /
 * state-context reassignments and the legacy global-token layout
 * defaults (modifier min-widths, length max-heights, nubbin offsets).
 */

@layer theme {
  .slds-dropdown {
    /* Surface */
    --slds-c-dropdown-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-dropdown-color-foreground: var(--slds-g-color-on-surface-2);
    --slds-c-dropdown-radius-border: var(--slds-g-radius-border-2);
    --slds-c-dropdown-spacing-block: var(--slds-g-spacing-1);
    --slds-c-dropdown-shadow: var(--slds-g-shadow-2);
    --slds-c-dropdown-shadow-focus: var(--slds-g-shadow-outline-focus-1);

    /* Item */
    --slds-c-dropdown-item-color-foreground: var(--slds-g-color-on-surface-2);
    --slds-c-dropdown-item-color-foreground-hover: var(--slds-g-color-on-surface-2);
    --slds-c-dropdown-item-color-foreground-active: var(--slds-g-color-on-surface-2);
    --slds-c-dropdown-item-color-foreground-disabled: var(--slds-g-color-disabled-1);
    --slds-c-dropdown-item-color-background: transparent;
    --slds-c-dropdown-item-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-dropdown-item-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-dropdown-item-spacing-block: var(--slds-g-spacing-2);
    --slds-c-dropdown-item-spacing-inline: var(--slds-g-spacing-3);
    --slds-c-dropdown-item-shadow-focus: var(--slds-g-shadow-inset-focus-1);

    /* Divider */
    --slds-c-dropdown-divider-sizing-border: calc(var(--slds-g-sizing-1) / 2);
    --slds-c-dropdown-divider-color-border: var(--slds-g-color-border-1);

    /* Default sizing / typography */
    min-width: calc(var(--slds-g-sizing-5) * 6);
    max-width: var(--slds-g-sizing-15);
    margin-block-start: calc(var(--slds-g-spacing-1) / 2);
    margin-block-end: calc(var(--slds-g-spacing-1) / 2);
    font-size: var(--slds-g-font-scale-neg-1);
  }

  /* Typeahead highlight */
  .slds-dropdown mark {
    font-weight: var(--slds-g-font-weight-7);
  }

  /* Item typography. Anchored under `.slds-dropdown` because per-theme paint
     on bare BEM-element selectors is forbidden by Rule 5 outside theme-base. */
  .slds-dropdown .slds-dropdown__item {
    line-height: var(--slds-g-font-line-height-base);
    font-weight: var(--slds-g-font-weight-4);
  }

  /* Section header */
  .slds-dropdown .slds-dropdown__header {
    font-size: var(--slds-g-font-scale-neg-1);
    font-weight: var(--slds-g-font-weight-6);
    padding-block: var(--slds-g-spacing-2);
    padding-inline: var(--slds-g-spacing-3);
  }

  .slds-dropdown .slds-dropdown__header:focus-visible {
    box-shadow: var(--slds-g-shadow-inset-focus-1);
    outline: 0;
    border-radius: 6px;
  }

  /* Notification offset */
  .slds-dropdown .slds-dropdown__item.slds-has-notification .slds-indicator_unsaved {
    inset-block-start: -0.375rem;
  }

  /* Trigger nubbin offsets when target is icon-only */
  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
    inset-inline-start: calc(var(--slds-g-spacing-2) * -1);
  }

  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
    inset-inline-end: calc(var(--slds-g-spacing-2) * -1);
  }

  /* Nubbin top/bottom margin */
  .slds-dropdown[class*='slds-nubbin_top'] {
    margin-block-start: var(--slds-g-spacing-2);
  }

  .slds-dropdown[class*='slds-nubbin_bottom'] {
    margin-block-end: var(--slds-g-spacing-2);
  }

  /* Width modifier scale */
  .slds-dropdown_xx-small {
    min-width: calc(var(--slds-g-sizing-5) * 6);
  }

  .slds-dropdown_x-small {
    min-width: calc(var(--slds-g-sizing-9) * 6);
  }

  .slds-dropdown_small {
    min-width: var(--slds-g-sizing-14);
  }

  .slds-dropdown_medium {
    min-width: var(--slds-g-sizing-15);
  }

  .slds-dropdown_large {
    min-width: calc(var(--slds-g-sizing-12) * 5);
  }

  .slds-dropdown_fluid {
    min-width: calc(var(--slds-g-sizing-5) * 12);
  }

  /* Length modifier scale */
  .slds-dropdown_length-5 {
    max-height: calc(
      (var(--slds-g-sizing-5) * var(--slds-g-font-line-height-base) + var(--slds-g-spacing-4)) * 5
    );
    overflow-y: auto;
  }

  .slds-dropdown_length-7 {
    max-height: calc(
      (var(--slds-g-sizing-5) * var(--slds-g-font-line-height-base) + var(--slds-g-spacing-4)) * 7
    );
    overflow-y: auto;
  }

  .slds-dropdown_length-10 {
    max-height: calc(
      (var(--slds-g-sizing-5) * var(--slds-g-font-line-height-base) + var(--slds-g-spacing-4)) * 10
    );
    overflow-y: auto;
  }

  .slds-dropdown_length-with-icon-5 {
    max-height: calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 5);
    overflow-y: auto;
  }

  .slds-dropdown_length-with-icon-7 {
    max-height: calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 7);
    overflow-y: auto;
  }

  .slds-dropdown_length-with-icon-10 {
    max-height: calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 10);
    overflow-y: auto;
  }

  /* Submenu spacing */
  .slds-has-submenu .slds-dropdown_submenu-left {
    margin-inline-end: var(--slds-g-spacing-1);
  }

  .slds-has-submenu .slds-dropdown_submenu-right {
    margin-inline-start: var(--slds-g-spacing-1);
  }

  .slds-has-submenu .slds-dropdown_submenu-bottom {
    margin-block-end: calc(var(--slds-g-spacing-1) * -1);
  }

  /* Inverse variant — reassigns canonical hooks under the BEM-modifier compound */
  .slds-dropdown_inverse {
    --slds-c-dropdown-color-background: var(--slds-g-color-surface-inverse-2);
    --slds-c-dropdown-color-foreground: var(--slds-g-color-surface-container-1);
    --slds-c-dropdown-item-color-foreground: var(--slds-g-color-surface-container-1);
    --slds-c-dropdown-item-color-foreground-hover: var(--slds-g-color-on-surface-inverse-2);
    --slds-c-dropdown-item-color-foreground-active: var(--slds-g-color-neutral-base-80);
    --slds-c-dropdown-item-color-foreground-disabled: var(--slds-g-color-palette-blue-20);
    --slds-c-dropdown-item-color-background-hover: transparent;
    --slds-c-dropdown-item-color-background-active: transparent;
  }

  /* Form-state context. Status classes land on the menu-item anchor itself
     (see __templates__/statusNotifications.html), so reassign canonical
     hooks at that anchor. Own-root `.slds-dropdown` keeps the rule anchored
     for the no-descendant-hook-writes compliance check. */
  .slds-dropdown .slds-dropdown__item > a.slds-has-error {
    --slds-c-dropdown-item-color-foreground: var(--slds-g-color-on-error-1);
    --slds-c-dropdown-item-color-foreground-hover: var(--slds-g-color-on-error-1);
    --slds-c-dropdown-item-color-foreground-active: var(--slds-g-color-on-error-1);
    --slds-c-dropdown-item-color-background: var(--slds-g-color-error-container-1);
    --slds-c-dropdown-item-color-background-hover: var(--slds-g-color-error-container-1);
    --slds-c-dropdown-item-color-background-active: var(--slds-g-color-error-container-1);
    --slds-c-icon-color-foreground: var(--slds-g-color-on-error-1);
  }

  .slds-dropdown .slds-dropdown__item > a.slds-has-success {
    --slds-c-dropdown-item-color-foreground: var(--slds-g-color-on-success-1);
    --slds-c-dropdown-item-color-foreground-hover: var(--slds-g-color-on-success-1);
    --slds-c-dropdown-item-color-foreground-active: var(--slds-g-color-on-success-1);
    --slds-c-dropdown-item-color-background: var(--slds-g-color-success-container-1);
    --slds-c-dropdown-item-color-background-hover: var(--slds-g-color-success-container-1);
    --slds-c-dropdown-item-color-background-active: var(--slds-g-color-success-container-1);
    --slds-c-icon-color-foreground: var(--slds-g-color-on-success-1);
  }

  .slds-dropdown .slds-dropdown__item > a.slds-has-warning {
    --slds-c-dropdown-item-color-foreground: var(--slds-g-color-on-warning-1);
    --slds-c-dropdown-item-color-foreground-hover: var(--slds-g-color-on-warning-1);
    --slds-c-dropdown-item-color-foreground-active: var(--slds-g-color-on-warning-1);
    --slds-c-dropdown-item-color-background: var(--slds-g-color-warning-container-1);
    --slds-c-dropdown-item-color-background-hover: var(--slds-g-color-warning-container-1);
    --slds-c-dropdown-item-color-background-active: var(--slds-g-color-warning-container-1);
  }

  /* Status-context underline + focus shadow inverter (paint, not hook writes —
     these properties don't expose a hook surface by design). */
  .slds-dropdown__item > a.slds-has-error:hover,
  .slds-dropdown__item > a.slds-has-error:focus,
  .slds-dropdown__item > a.slds-has-success:hover,
  .slds-dropdown__item > a.slds-has-success:focus,
  .slds-dropdown__item > a.slds-has-warning:hover,
  .slds-dropdown__item > a.slds-has-warning:focus {
    text-decoration: underline;
  }

  .slds-dropdown__item > a.slds-has-error:focus-visible,
  .slds-dropdown__item > a.slds-has-success:focus-visible,
  .slds-dropdown__item > a.slds-has-warning:focus-visible {
    box-shadow: var(--slds-g-shadow-inset-inverse-focus-1);
  }

  /* Action overflow modifier */
  .slds-dropdown_actions {
    --slds-c-dropdown-item-color-foreground: var(--slds-g-color-neutral-base-10);
  }
}