/*
 * Světlina 96: základní vzhled tlačítek zpět, dopředu a obnovit (coral-navigace.js).
 *
 * Všechno pod :where(), web ho přebije čímkoliv a ladí ho proměnnými ve svém jádře:
 *   --coral-navigace-barva           barva ikon, výchozí barva textu okolí
 *   --coral-navigace-pozadi          pozadí tlačítka, výchozí žádné
 *   --coral-navigace-pozadi-najeti   pozadí při najetí a stisku
 *   --coral-navigace-fokus           kroužek fokusu z klávesnice
 *   --coral-navigace-velikost        viditelná velikost tlačítka (40px)
 *   --coral-navigace-cil             nejmenší plocha pro prst i myš (40px); menší
 *                                    tlačítko ji dostane neviditelným přesahem
 *   --coral-navigace-ikona           velikost ikony (20px)
 *   --coral-navigace-mezera          mezera mezi tlačítky (2px)
 *   --coral-navigace-zaobleni        zaoblení tlačítka (50%)
 *   --coral-navigace-vypnute         průhlednost, když není kam jít (0.35)
 *   --coral-navigace-posun           posun šipky při najetí (3px)
 *   --coral-navigace-posun-stisk     posun šipky při stisku (5px)
 *   --coral-navigace-otoceni         pootočení obnovení při najetí (30deg)
 *   --coral-navigace-maska-zpet, --coral-navigace-maska-dopredu,
 *   --coral-navigace-maska-obnovit   vlastní ikona jako url(...)
 *
 * Ikony jsou maska vybarvená currentColor (tvary Lucide), takže fungují i na
 * cizím webu bez sady ikon. Uvnitř :where() nesmí být závorky: interpretátor
 * ho pro cizí weby odstraňuje jednoduchým vzorem.
 */
:where(.coral-navigace) {
    display: inline-flex;
    align-items: center;
    gap: var(--coral-navigace-mezera, 2px);
    flex-shrink: 0;
}
:where(.coral-navigace__tl) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--coral-navigace-velikost, 40px);
    height: var(--coral-navigace-velikost, 40px);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--coral-navigace-zaobleni, 50%);
    background: var(--coral-navigace-pozadi, transparent);
    box-shadow: none;
    color: var(--coral-navigace-barva, inherit);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
:where(.coral-navigace__tl[hidden]) { display: none; }
/* Neviditelný přesah: menší tlačítko má pro prst i myš pořád aspoň --coral-navigace-cil. */
:where(.coral-navigace__tl)::before {
    content: '';
    position: absolute;
    inset: min(0px, calc((var(--coral-navigace-velikost, 40px) - var(--coral-navigace-cil, 40px)) / 2));
}
:where(.coral-navigace__tl:focus-visible) { box-shadow: 0 0 0 2px var(--coral-navigace-fokus, rgba(250, 129, 185, 0.6)); }
:where(.coral-navigace__tl:enabled:active) { background: var(--coral-navigace-pozadi-najeti, var(--coral-navigace-pozadi, transparent)); }
:where(.coral-navigace__tl:disabled) { opacity: var(--coral-navigace-vypnute, 0.35); cursor: default; }
:where(.coral-navigace__ikona) {
    display: block;
    width: var(--coral-navigace-ikona, 20px);
    height: var(--coral-navigace-ikona, 20px);
    background: currentColor;
    -webkit-mask: var(--coral-navigace-maska) center / contain no-repeat;
    mask: var(--coral-navigace-maska) center / contain no-repeat;
    pointer-events: none;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.coral-navigace__tl--zpet) {
    --coral-navigace-maska: var(--coral-navigace-maska-zpet, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"));
}
:where(.coral-navigace__tl--dopredu) {
    --coral-navigace-maska: var(--coral-navigace-maska-dopredu, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"));
}
:where(.coral-navigace__tl--obnovit) {
    --coral-navigace-maska: var(--coral-navigace-maska-obnovit, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E"));
}
@media (hover: hover) {
    :where(.coral-navigace__tl:enabled:hover) { background: var(--coral-navigace-pozadi-najeti, var(--coral-navigace-pozadi, transparent)); }
    :where(.coral-navigace__tl--zpet:enabled:hover .coral-navigace__ikona) { transform: translateX(calc(-1 * var(--coral-navigace-posun, 3px))); }
    :where(.coral-navigace__tl--dopredu:enabled:hover .coral-navigace__ikona) { transform: translateX(var(--coral-navigace-posun, 3px)); }
    :where(.coral-navigace__tl--obnovit:enabled:hover .coral-navigace__ikona) { transform: rotate(var(--coral-navigace-otoceni, 30deg)); }
}
:where(.coral-navigace__tl--zpet:enabled:active .coral-navigace__ikona) { transform: translateX(calc(-1 * var(--coral-navigace-posun-stisk, 5px))); }
:where(.coral-navigace__tl--dopredu:enabled:active .coral-navigace__ikona) { transform: translateX(var(--coral-navigace-posun-stisk, 5px)); }
:where(.coral-navigace__tl--obnovit.je-obnovuje .coral-navigace__ikona) { animation: coral-navigace-otoc 700ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes coral-navigace-otoc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    :where(.coral-navigace__ikona) { transition: none; }
    :where(.coral-navigace__tl--obnovit.je-obnovuje .coral-navigace__ikona) { animation: none; }
}