/* ================================================================
   DROPDOWN COMPONENT
   4 placements + items + dividers + headers
   Budget: < 2.5KB minified
   ================================================================ */

/* ── WRAPPER ─────────────────────────────────────────────────── */

.dropdown {
    position: relative;
    display: inline-flex;
}

/* ── MENU ────────────────────────────────────────────────────── */

.dropdown__menu {
    position: absolute;
    z-index: var(--z-dropdown);
    min-width: var(--dropdown-min-width);
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--dropdown-shadow);
    padding: var(--space-1) 0;
    list-style: none;
    margin: 0;
}

/* ── PLACEMENTS ──────────────────────────────────────────────── */

.dropdown--bottom-start .dropdown__menu { top: 100%; left: 0; margin-top: var(--space-1); }
.dropdown--bottom-end .dropdown__menu   { top: 100%; right: 0; margin-top: var(--space-1); }
.dropdown--top-start .dropdown__menu    { bottom: 100%; left: 0; margin-bottom: var(--space-1); }
.dropdown--top-end .dropdown__menu      { bottom: 100%; right: 0; margin-bottom: var(--space-1); }

/* ── ITEMS ───────────────────────────────────────────────────── */

.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: var(--dropdown-item-height);
    padding: 0 var(--dropdown-item-padding-x);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    text-align: left;
}
.dropdown__item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.dropdown__item:focus-visible {
    background: var(--bg-hover);
    color: var(--text-primary);
    outline: none;
}

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

.dropdown__item__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-tertiary);
}
.dropdown__item__icon svg { width: 16px; height: 16px; }
.dropdown__item:hover .dropdown__item__icon { color: inherit; }

/* ── DIVIDER ─────────────────────────────────────────────────── */

.dropdown__divider {
    height: 1px;
    background: var(--dropdown-divider-color);
    margin: var(--space-1) 0;
    border: none;
}

/* ── HEADER ──────────────────────────────────────────────────── */

.dropdown__header {
    padding: var(--space-2) var(--dropdown-item-padding-x);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ── ANIMATION ───────────────────────────────────────────────── */

.dropdown__menu[x-transition\:enter] { transition: opacity 100ms ease-out, transform 100ms ease-out; }
.dropdown__menu[x-transition\:enter-start] { opacity: 0; transform: scale(0.95) translateY(-4px); }
.dropdown__menu[x-transition\:enter-end] { opacity: 1; transform: scale(1) translateY(0); }
.dropdown__menu[x-transition\:leave] { transition: opacity 75ms ease-in; }
.dropdown__menu[x-transition\:leave-start] { opacity: 1; }
.dropdown__menu[x-transition\:leave-end] { opacity: 0; }