/* 
-- nom: dropdown.css --
-- framework: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Comportament desplegable. Peça que reacciona a un estat (.is-open), independent de qui l'obri. Variants de posició: bottom-right (defecte), bottom-left, top-right, top-left. Contingut: icon+text (defecte), text. --
-- dependència: init.css, th-src.css, th-core.css, state.css, zindex.css, tic-src.css, tic-core.css i tic.css --
*/

:root {
    --dropdown-icon-size: 1.5rem;

    --dropdown-icon-transt: transform var(--motion-dur-lg) var(--motion-ease-std);
}

/* =============================================
   BASE — overlay autosuficient + estat tancat
   ============================================= */
:has(> .dropdown) {
    position: relative;
}
.dropdown {
    /* Color de tema resolt aquí (no al :root); .dropdown__label l'hereta. */
    --dropdown-label-txt-cl: var(--cl-cp-fg);
    position: absolute;
    top: calc(100% + var(--sp-xs));
    right: var(--sp-xs);
    width: max-content;
    max-width: calc(100vw - 2 * var(--sp-xs));

    padding: var(--sp-xl) 0;
    background-color: var(--cl-cp-bg-hi);
    border: var(--bw-xs) solid var(--cl-cp-border);


    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: all var(--motion-dur-md) var(--motion-ease-out);
    z-index: var(--z-dropdown);   
}

/* =============================================
   ESTAT OBERT
   ============================================= */
.dropdown.is-open {
    transform: scaleY(1);
    opacity: 1;
}

/* =============================================
   ÍTEMS — Contingut base (defecte: icon)
   ============================================= */
.dropdown li {
    width: 100%;
}
.dropdown :is(a, button) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: var(--sp-lg);
    padding: var(--sp-xl) var(--sp-2xl);
    white-space: nowrap;
    color: inherit;
    transition: background-color var(--motion-dur-md) var(--motion-ease-out);
}
/* Icona — Slot (contenidor grid) */
.dropdown__icon {
    display: grid;
    place-items: center;
    inline-size: var(--dropdown-icon-size);
    block-size: var(--dropdown-icon-size);
    aspect-ratio: 1;
    flex-shrink: 0;
    transform: scale(1);
    transition: var(--dropdown-icon-transt);
}
.dropdown__label {
    font-size: var(--step-2);
    color: var(--dropdown-label-txt-cl);
    transform: scale(1);
    transition: transform var(--motion-dur-lg) var(--motion-ease-std);
}
.dropdown :is(a, button):hover .dropdown__icon {
    transform: scale(1.2);
}
.dropdown :is(a, button):hover .dropdown__label {
    transform: scale(1.2);
}

/* =============================================
   VARIANT TEXT — Només text, sense icona
   ============================================= */
.dropdown--text .dropdown__icon {
    display: none;
}

/* =============================================
   VARIANTS DE POSICIÓ
   ============================================= */
/* Top-right */
.dropdown--top-right {
    bottom: calc(100% + var(--sp-xs));
    right: var(--sp-xs);
    top: auto;
    left: auto;
    transform-origin: bottom;
}
/* Top-left */
.dropdown--top-left {
    bottom: calc(100% + var(--sp-xs));
    left: var(--sp-xs);
    top: auto;
    right: auto;
    transform-origin: bottom;
}
/* Bottom-right (explícit, igual que defecte) */
.dropdown--bottom-right {
    top: calc(100% + var(--sp-xs));
    right: var(--sp-xs);
    bottom: auto;
    left: auto;
    transform-origin: top;
}
/* Bottom-left */
.dropdown--bottom-left {
    top: calc(100% + var(--sp-xs));
    left: var(--sp-xs);
    bottom: auto;
    right: auto;
    transform-origin: top;
}