/*
 * Upgrader2 51: základní vzhled tlačítek režimu aplikace (coral-rezim-aplikace.js).
 *
 * Všechno pod :where(), web ho přebije čímkoliv a ladí ho proměnnými ve svém jádře.
 * Bez vlastních proměnných se drží těch z tlačítek zpět a obnovit
 * (--coral-navigace-*), takže obě skupiny vedle sebe vypadají stejně:
 *   --coral-rezim-barva           barva ikon, výchozí barva textu okolí
 *   --coral-rezim-pozadi          pozadí tlačítka, výchozí žádné
 *   --coral-rezim-pozadi-najeti   pozadí při najetí a stisku
 *   --coral-rezim-fokus           kroužek fokusu z klávesnice
 *   --coral-rezim-velikost        viditelná velikost tlačítka (40px)
 *   --coral-rezim-cil             nejmenší plocha pro prst i myš (40px); menší
 *                                 tlačítko ji dostane neviditelným přesahem
 *   --coral-rezim-ikona           velikost ikony (20px)
 *   --coral-rezim-mezera          mezera mezi tlačítky (2px)
 *   --coral-rezim-zaobleni        zaoblení tlačítka (50%)
 *   --coral-rezim-posun           posun ikony lišty při najetí (2px)
 *   --coral-rezim-zvetseni        zvětšení ikony celé obrazovky při najetí (1.12)
 *   --coral-rezim-maska-zapnout, --coral-rezim-maska-vypnout,
 *   --coral-rezim-maska-obrazovka, --coral-rezim-maska-obrazovka-vypnout
 *                                 vlastní ikona jako url(...)
 *
 * Ikony jsou maska vybarvená currentColor (tvary Lucide: panel-top-close,
 * panel-top-open, maximize, minimize), 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-rezim) {
    display: inline-flex;
    align-items: center;
    gap: var(--coral-rezim-mezera, var(--coral-navigace-mezera, 2px));
    flex-shrink: 0;
}
:where(.coral-rezim[hidden]) { display: none; }
:where(.coral-rezim__tl) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--coral-rezim-velikost, var(--coral-navigace-velikost, 40px));
    height: var(--coral-rezim-velikost, var(--coral-navigace-velikost, 40px));
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--coral-rezim-zaobleni, var(--coral-navigace-zaobleni, 50%));
    background: var(--coral-rezim-pozadi, var(--coral-navigace-pozadi, transparent));
    box-shadow: none;
    color: var(--coral-rezim-barva, 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-rezim__tl[hidden]) { display: none; }
:where(.coral-rezim__tl[aria-busy]) { cursor: progress; }
/* Neviditelný přesah: menší tlačítko má pro prst i myš pořád aspoň --coral-rezim-cil. */
:where(.coral-rezim__tl)::before {
    content: '';
    position: absolute;
    inset: min(0px, calc((var(--coral-rezim-velikost, var(--coral-navigace-velikost, 40px)) - var(--coral-rezim-cil, var(--coral-navigace-cil, 40px))) / 2));
}
:where(.coral-rezim__tl:focus-visible) { box-shadow: 0 0 0 2px var(--coral-rezim-fokus, var(--coral-navigace-fokus, rgba(250, 129, 185, 0.6))); }
:where(.coral-rezim__tl:active) { background: var(--coral-rezim-pozadi-najeti, var(--coral-navigace-pozadi-najeti, var(--coral-rezim-pozadi, var(--coral-navigace-pozadi, transparent)))); }
:where(.coral-rezim__ikona) {
    display: block;
    width: var(--coral-rezim-ikona, var(--coral-navigace-ikona, 20px));
    height: var(--coral-rezim-ikona, var(--coral-navigace-ikona, 20px));
    background: currentColor;
    -webkit-mask: var(--coral-rezim-maska) center / contain no-repeat;
    mask: var(--coral-rezim-maska) center / contain no-repeat;
    pointer-events: none;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.coral-rezim__tl--rezim) {
    --coral-rezim-maska: var(--coral-rezim-maska-zapnout, 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%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='m9 16 3-3 3 3'/%3E%3C/svg%3E"));
}
:where(.coral-rezim__tl--rezim[data-zapnuto]) {
    --coral-rezim-maska: var(--coral-rezim-maska-vypnout, 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%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='m15 14-3 3-3-3'/%3E%3C/svg%3E"));
}
:where(.coral-rezim__tl--obrazovka) {
    --coral-rezim-maska: var(--coral-rezim-maska-obrazovka, 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='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"));
}
:where(.coral-rezim__tl--obrazovka[data-zapnuto]) {
    --coral-rezim-maska: var(--coral-rezim-maska-obrazovka-vypnout, 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='M8 3v3a2 2 0 0 1-2 2H3'/%3E%3Cpath d='M21 8h-3a2 2 0 0 1-2-2V3'/%3E%3Cpath d='M3 16h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"));
}
@media (hover: hover) {
    :where(.coral-rezim__tl:hover) { background: var(--coral-rezim-pozadi-najeti, var(--coral-navigace-pozadi-najeti, var(--coral-rezim-pozadi, var(--coral-navigace-pozadi, transparent)))); }
    :where(.coral-rezim__tl--rezim:hover .coral-rezim__ikona) { transform: translateY(calc(-1 * var(--coral-rezim-posun, 2px))); }
    :where(.coral-rezim__tl--rezim[data-zapnuto]:hover .coral-rezim__ikona) { transform: translateY(var(--coral-rezim-posun, 2px)); }
    :where(.coral-rezim__tl--obrazovka:hover .coral-rezim__ikona) { transform: scale(var(--coral-rezim-zvetseni, 1.12)); }
    :where(.coral-rezim__tl--obrazovka[data-zapnuto]:hover .coral-rezim__ikona) { transform: scale(calc(2 - var(--coral-rezim-zvetseni, 1.12))); }
}
:where(.coral-rezim__tl--rezim:active .coral-rezim__ikona) { transform: translateY(calc(-2 * var(--coral-rezim-posun, 2px))); }
:where(.coral-rezim__tl--rezim[data-zapnuto]:active .coral-rezim__ikona) { transform: translateY(calc(2 * var(--coral-rezim-posun, 2px))); }
@media (prefers-reduced-motion: reduce) {
    :where(.coral-rezim__ikona) { transition: none; }
}