/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 *
 * Theme-layer paint surface for Menu (the SLDS dropdown). Reads
 * canonical `--slds-c-dropdown-*` hooks only; per-theme files under
 * `@layer theme` assign them and carry every global-tier read.
 *
 * Class root is `.slds-dropdown` (BEM root override registered in
 * resolveHookPrefix.ts so compliance recognizes own-root anchoring).
 */

/* Trigger positioning — structural, no paint */
.slds-dropdown-trigger {
  position: relative;
  display: inline-block;

  .slds-dropdown {
    inset-block-start: 100%;
  }

  .slds-dropdown_bottom {
    inset-block-start: auto;
  }
}

/*
 * Trigger relay routing. Lives unlayered (above @layer theme in the
 * cascade) so `revert-layer` rolls back INTO @layer theme — letting
 * buttonIcon's variant rules paint when the customer hasn't set a
 * --slds-c-dropdown-trigger-* hook. When the relay IS set, it lands on
 * the canonical button hook and the trigger flips.
 */
.slds-dropdown-trigger .slds-button {
  --slds-c-button-color-background: var(--slds-c-dropdown-trigger-color-background, revert-layer);
  --slds-c-button-color-background-hover: var(--slds-c-dropdown-trigger-color-background-hover, revert-layer);
  --slds-c-button-color-background-active: var(
    --slds-c-dropdown-trigger-color-background-active,
    revert-layer
  );
  --slds-c-button-color-foreground: var(--slds-c-dropdown-trigger-color-foreground, revert-layer);
  --slds-c-button-color-foreground-hover: var(--slds-c-dropdown-trigger-color-foreground-hover, revert-layer);
  --slds-c-button-color-foreground-active: var(
    --slds-c-dropdown-trigger-color-foreground-active,
    revert-layer
  );
  --slds-c-button-color-border: var(--slds-c-dropdown-trigger-color-border, revert-layer);
  --slds-c-button-color-border-hover: var(--slds-c-dropdown-trigger-color-border-hover, revert-layer);
  --slds-c-button-radius-border: var(--slds-c-dropdown-trigger-radius-border, revert-layer);
  --slds-c-button-sizing-border: var(--slds-c-dropdown-trigger-sizing-border, revert-layer);
  --slds-c-button-icon-size: var(--slds-c-dropdown-trigger-icon-size, revert-layer);
  --slds-c-button-icon-color-foreground: var(--slds-c-dropdown-trigger-icon-color-foreground, revert-layer);
}

/* Hover-toggle modifier (visibility/opacity only) */
.slds-dropdown-trigger_hover {
  .slds-dropdown {
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.1s linear,
      visibility 0.1s linear;
  }

  &:hover,
  &:focus {
    outline: 0;

    .slds-dropdown {
      visibility: visible;
      opacity: 1;
      transition:
        opacity 0.1s linear,
        visibility 0.1s linear;
    }
  }
}

/* Click-toggle modifier (display only) */
.slds-dropdown-trigger_click {
  .slds-dropdown,
  &:hover .slds-dropdown {
    display: none;
  }

  &.slds-is-open .slds-dropdown {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}

/* Dropdown root paint */
.slds-dropdown {
  position: absolute;
  z-index: 7000;
  left: 50%;
  transform: translateX(-50%);
  float: inline-start;
  width: max-content;
  border-radius: var(--slds-c-dropdown-radius-border);
  padding-block-start: var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block));
  padding-block-end: var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block));
  background-color: var(--slds-c-dropdown-color-background);
  box-shadow: var(--slds-c-dropdown-shadow);
  color: var(--slds-c-dropdown-color-foreground);

  /* Typeahead highlight (paint reads inherited values, no token coupling) */
  mark {
    background-color: transparent;
    color: inherit;
  }

  &:focus-visible {
    outline: 0;
    box-shadow: var(--slds-c-dropdown-shadow-focus);
  }

  .slds-has-divider_top-space {
    border-block-start-style: solid;
    border-block-start-width: var(--slds-c-dropdown-divider-sizing-border, 0);
    border-block-start-color: var(--slds-c-dropdown-divider-color-border, transparent);
  }
}

/* Dropdown item paint. Selectors flattened to match legacy specificity. */
.slds-dropdown__item > a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(
    --slds-c-dropdown-item-spacing-block-start,
    var(--slds-c-dropdown-item-spacing-block)
  );
  padding-block-end: var(--slds-c-dropdown-item-spacing-block-end, var(--slds-c-dropdown-item-spacing-block));
  padding-inline-start: var(
    --slds-c-dropdown-item-spacing-inline-start,
    var(--slds-c-dropdown-item-spacing-inline)
  );
  padding-inline-end: var(
    --slds-c-dropdown-item-spacing-inline-end,
    var(--slds-c-dropdown-item-spacing-inline)
  );
  color: var(--slds-c-dropdown-item-color-foreground);
  background-color: var(--slds-c-dropdown-item-color-background);
  text-decoration: none;
  cursor: pointer;

  &:hover,
  &:focus {
    outline: 0;
    text-decoration: none;
    color: var(--slds-c-dropdown-item-color-foreground-hover);
    background-color: var(--slds-c-dropdown-item-color-background-hover);
    box-shadow: none;
  }

  &:not([aria-disabled='true']):focus-visible {
    box-shadow: var(--slds-c-dropdown-item-shadow-focus);
    outline: 0;
    border-radius: 6px;
  }

  &:active {
    text-decoration: none;
    color: var(--slds-c-dropdown-item-color-foreground-active);
    background-color: var(--slds-c-dropdown-item-color-background-active);
  }

  &[aria-disabled='true'] {
    color: var(--slds-c-dropdown-item-color-foreground-disabled);
    cursor: default;

    &:hover {
      background-color: transparent;
    }

    .slds-icon {
      fill: var(--slds-c-dropdown-item-color-foreground-disabled);
    }
  }
}

/* Selected-state checkmark visibility (paint inherits via icon's own hook) */
.slds-dropdown__item .slds-icon_selected {
  opacity: 0;
  transition: opacity 0.05s ease;
}

.slds-dropdown__item.slds-is-selected .slds-icon_selected,
.slds-dropdown__item.slds-is-selected .slds-icon--selected {
  opacity: 1;
}

/* Position modifiers (structural) */
.slds-dropdown_left {
  inset-inline-start: 0;
  inset-inline-end: auto;
  transform: translateX(0);
}

.slds-dropdown_right {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateX(0);
}

.slds-dropdown_bottom {
  inset-block-end: 100%;
}

.slds-dropdown_fluid {
  max-width: 100%;
  width: 100%;
}

[dir='rtl'] .slds-dropdown_center {
  inset-inline-start: auto;
  inset-inline-end: auto;
  transform: translateX(calc(50% - (0.875rem / 2)));
}

/* Submenu positioning (structural) */
.slds-has-submenu {
  position: relative;

  .slds-dropdown_submenu {
    inset-block-start: 0;
    transform: none;
  }

  .slds-dropdown_submenu-left {
    inset-inline-start: auto;
    inset-inline-end: 100%;
  }

  .slds-dropdown_submenu-right {
    inset-inline-start: 100%;
  }

  .slds-dropdown_submenu-bottom {
    inset-block-start: auto;
    inset-block-end: 0;
  }

  &.slds-dropdown__item {
    .slds-dropdown_submenu {
      display: none;
    }
  }

  [role='menuitem'][aria-expanded='true'] + .slds-dropdown_submenu {
    display: block;
  }
}