/*
-- nom: dropdown-trg.css - dropdown-trigger --
-- framework: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Component desplegable amb disparador (trigger) integrat (CSS pur, sense JS). Disparador + panell en un sol component; obre via checkbox + :has(). Variants de posició: bottom-right (defecte), bottom-left, top-right, top-left. Contingut: icon+text (defecte), text. Amplada del panell segons contingut. Classe base: .dropdown-trg. --
-- 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-trg-icon-size: 1.5rem;

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

/* =============================================
   BASE — disparador compacte, panell com a overlay ancorat
   ============================================= */
.dropdown-trg {
    /* Color del label: es declara aquí (no al :root) perquè es resolgui
       al context del dropdown-trg — gira amb el tema i amb la inversió (color--invert). */
    --dropdown-trg-label-txt-cl: var(--cl-cp-fg);
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* =============================================
   TOGGLE (checkbox ocult + label visible)
   ============================================= */
.dropdown-trg input {
    display: none;
}
.dropdown-trg label {
    cursor: pointer;
}

/* =============================================
   PANELL — Defecte: bottom-right, amplada segons contingut
   ============================================= */
.dropdown-trg ul {
    position: absolute;
    top: calc(100% + var(--sp-xs));
    right: var(--sp-xs);
    width: max-content;
    max-width: calc(100vw - 2 * var(--sp-xs));

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

    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-trg:has(input:checked) ul {
    transform: scaleY(1);
    opacity: 1;
}
.dropdown-trg:has(input:checked) {
    overflow: visible;
}

/* =============================================
   ÍTEMS — Contingut base (defecte: icon)
   ============================================= */
.dropdown-trg li {
    width: 100%;
}
.dropdown-trg :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-trg__icon {
    display: grid;
    place-items: center;
    inline-size: var(--dropdown-trg-icon-size);
    block-size: var(--dropdown-trg-icon-size);
    aspect-ratio: 1;
    flex-shrink: 0;
    transform: scale(1);
    transition: var(--dropdown-trg-icon-transt);
}
.dropdown-trg__label {
    font-size: var(--step-2);
    color: var(--dropdown-trg-label-txt-cl);
    transform: scale(1);
    transition: transform var(--motion-dur-lg) var(--motion-ease-std);
}
.dropdown-trg :is(a, button):hover .dropdown-trg__icon {
    transform: scale(1.2);
}
.dropdown-trg :is(a, button):hover .dropdown-trg__label {
    transform: scale(1.2);
}

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

/* =============================================
   VARIANTS DE POSICIÓ
   ============================================= */
/* Top-right */
.dropdown-trg--top-right ul {
    bottom: calc(100% + var(--sp-xs));
    right: var(--sp-xs);
    top: auto;
    left: auto;
    transform-origin: bottom;
}
/* Top-left */
.dropdown-trg--top-left ul {
    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-trg--bottom-right ul {
    top: calc(100% + var(--sp-xs));
    right: var(--sp-xs);
    bottom: auto;
    left: auto;
    transform-origin: top;
}
/* Bottom-left */
.dropdown-trg--bottom-left ul {
    top: calc(100% + var(--sp-xs));
    left: var(--sp-xs);
    bottom: auto;
    right: auto;
    transform-origin: top;
}