/*
 * Dropdown — disclosure menu built on the native <details>/<summary>
 * pair so we get keyboard, screen-reader, and toggle behavior for free.
 *
 * Structure:
 *
 *   <details class="dropdown">
 *     <summary>...trigger contents...</summary>
 *     <div class="dropdown__panel">
 *       <a class="dropdown__item">...</a>
 *       <button class="dropdown__item dropdown__item--danger">...</button>
 *     </div>
 *   </details>
 *
 * The panel floats above the trigger via `position: absolute`. Add
 * `.dropdown__panel--up` to open upward instead of the default down
 * (e.g. for a menu pinned to the bottom of a sidebar).
 *
 * Click-outside-to-close is a known limitation of the bare <details>
 * approach. Add a small Stimulus controller when we have a use that
 * actually needs it; for the user menu it isn't worth the JS.
 */

@layer components {
  .dropdown {
    position: relative;
  }

  .dropdown > summary {
    list-style: none;
    cursor: pointer;
  }

  /* Hide the default disclosure triangle in WebKit. */
  .dropdown > summary::-webkit-details-marker {
    display: none;
  }

  .dropdown__panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 10;
    min-width: 12rem;
    padding: 0.375rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow:
      0 1px 2px   oklch(0% 0 0 / 6%),
      0 4px 12px  -2px oklch(0% 0 0 / 7%),
      0 16px 32px -8px oklch(0% 0 0 / 9%);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  /* Modifier — open upward instead of downward. Use when the trigger
     sits near the bottom of its container. */
  .dropdown__panel--up {
    top: auto;
    bottom: calc(100% + 0.375rem);
  }

  .dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--color-text-heading);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    width: 100%;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }

  .dropdown__item:hover,
  .dropdown__item:focus-visible {
    background: var(--sidebar-hover-bg);
    color: var(--color-text-heading);
  }

  .dropdown__item--danger {
    color: var(--color-danger);
  }

  .dropdown__item--danger:hover,
  .dropdown__item--danger:focus-visible {
    color: var(--color-danger);
  }

  .dropdown__item-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--sidebar-icon);
  }

  .dropdown__item--danger .dropdown__item-icon {
    color: var(--color-danger);
  }

  /* `button_to` wraps in a form — kill its default block-level margin
     so consecutive form-items don't gain a vertical gap. */
  .dropdown__item-form {
    margin: 0;
  }
}