/* =============================================================================
 * ELAB user actions — globaalsed kasutaja-tegevus nuppude stiilid.
 *
 * NB: `.elab-btn` baas, action-modifikaatorid (`--clap` / `--list` / `--seen`)
 * + hover/focus/disabled stiilid elavad nüüd UI Kit'is
 * (elab-ui.css, sektsioonid "4. Nupud" + "8.5 Domain primitiivid").
 *
 * Siin failis ainult:
 *   - `.elab-user-actions` wrapper (nuppude rea konteiner)
 *   - `.elab-action-icon` + `.elab-action-count` (nupu-sisu pisidetailid)
 *   - `.elab-btn--seen.active` ja `.elab-btn--favorite.active` legacy state-stiilid
 *     PHP renderdab `.active` (vt class-elab-bookmarks.php `build_button_class`),
 *     UI Kit kasutab BEM-konventsiooni `.is-on`. Kuni PHP-migratsioonini hoiame
 *     `.active`-binding'u siin, et legacy aktiivsed nupud säilitaks oma visuaali.
 *     TODO: migrate PHP `.active` → `.is-on`, kustutada need reeglid.
 * ============================================================================= */

.elab-user-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.elab-action-icon {
    font-size: 18px;
}

.elab-action-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 0.45em;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 12px;
    line-height: 1;
}

.elab-btn .elab-action-count {
    margin-left: 2px;
}

/* Legacy state-binding (`.active`) — PHP `build_button_class` annab selle. */
.elab-btn--seen.active {
    background: #345995;
    border-color: #345995;
    color: #fff;
}

/* Hover säilitab valge teksti (UI Kit `.elab-btn--seen:hover` muudaks muidu
 * color: var(--elab-text)-iks — halb kontrast sinise tausta peal). */
.elab-btn--seen.active:hover {
    background: #2a4877;
    border-color: #2a4877;
    color: #fff;
}

.elab-btn--favorite.active {
    background: var(--elab-green);
    border-color: var(--elab-green);
    color: #fff;
}

.elab-btn--favorite.active:hover {
    background: var(--elab-green-hover);
    border-color: var(--elab-green-hover);
    color: #fff;
}

.elab-btn--favorite.active svg path {
    fill: currentColor;
}