/* ==================== vlastní rozbalovací seznamy ====================
   Nahrazují systémové <select> na webu i v administraci.

   Proč vůbec: systémový select si vykresluje operační systém, ne stránka.
   Na Macu je to jeden tvar, na Windows druhý, na mobilu válec přes půl
   obrazovky, a žádný z nich se nedá obarvit. Tady se seznam vykresluje jako
   každý jiný prvek stránky, takže vypadá stejně v každém prohlížeči.

   Tlačítko si bere třídy původního selectu (`select` na webu, `sel`
   v administraci), takže má stejné rozměry, rámeček i chování při focusu
   jako pole vedle něj. Tenhle soubor přidává jen to, co navíc: panel,
   označenou volbu a otočenou šipku.

   Barvy panelu jdou přes proměnné `--vyber-*`. Web (web.css) i administrace
   (admin.css) je nastavují světle a červeně. Záložní hodnoty v `var()` jsou
   stejné, světlé a červené, kdyby některá stránka proměnné nenastavila. Obě
   kopie souboru (web/assets/css/vyber.css a build/vyber.css) musí zůstat
   bajtově shodné.

   Panel je `position:fixed` a dopočítává se při otevření. V administraci
   stojí selecty v tabulkách, které mají vodorovné posouvání, panel
   v normálním toku by se o jejich okraj uřízl v polovině. */

.vyber{position:relative;display:block}

/* Původní select zůstává v dokumentu: odesílá se s formulářem, drží hodnotu
   a bez JavaScriptu je to pořád funkční pole. Jen ho nevidíme ani nečteme
   nahlas dvakrát, to obstará tlačítko níž. */
.vyber__zdroj{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.vyber__tlacitko{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;cursor:pointer}
.vyber__tlacitko::after{content:"";flex:none;width:16px;height:16px;
  background:currentColor;opacity:.55;transition:transform .2s var(--ease-expo,ease),opacity .2s;
  -webkit-mask:var(--vyber-sipka) center/16px no-repeat;mask:var(--vyber-sipka) center/16px no-repeat}
.vyber.je-otevreny .vyber__tlacitko::after{transform:rotate(180deg);opacity:1}
.vyber__text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vyber__text.je-prazdny{color:var(--muted,#5B6470)}

/* Šipka je maska, ne obrázek na pozadí. Díky tomu má barvu textu, takže
   se sama přebarví i uvnitř zvýrazněného pole. */
.vyber{--vyber-sipka: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

/* Tlačítko přebírá vzhled po poli, ale šipku po něm zdědit nesmí. Kreslíme
   si vlastní, aby se dala otočit. */
.vyber__tlacitko.select,.vyber__tlacitko.sel{background-image:none;padding-right:14px}

.vyber__panel{position:fixed;z-index:120;min-width:180px;max-height:min(52vh,380px);overflow:auto;
  padding:6px;border-radius:var(--r-md,18px);
  background:var(--vyber-panel,#FFFFFF);border:1px solid var(--line-strong,#C3C8CF);
  box-shadow:var(--vyber-stin,0 22px 52px -20px rgba(4,7,10,.20));
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s ease,transform .16s var(--ease-expo,ease)}
.vyber.je-otevreny .vyber__panel{opacity:1;transform:none;pointer-events:auto}

.vyber__moznost{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:var(--r-xs,8px);cursor:pointer;
  font-size:var(--fs-mala,.9375rem);line-height:1.35;color:var(--vyber-text,#0B0D10)}
.vyber__moznost + .vyber__moznost{margin-top:2px}
.vyber__moznost:hover,.vyber__moznost.je-na-rade{background:rgba(var(--film,11,13,16),.07);color:var(--vyber-text,#0B0D10)}
.vyber__moznost[aria-selected="true"]{color:var(--vyber-text-vybrany,#BF0818);background:rgba(var(--vyber-akcent-rgb,225,10,30),.10)}
.vyber__moznost[aria-selected="true"]::after{content:"";width:15px;height:15px;flex:none;
  background:currentColor;
  -webkit-mask:var(--vyber-fajfka) center/15px no-repeat;mask:var(--vyber-fajfka) center/15px no-repeat}
.vyber__panel{--vyber-fajfka: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Nadpis skupiny, když má select <optgroup>. */
.vyber__skupina{padding:10px 12px 5px;font-size:var(--fs-mala,.9375rem);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted,#5B6470)}
.vyber__moznost[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* Chybové zvýraznění se řídí stejnou třídou jako u ostatních polí, aby
   ověřování formuláře nemuselo vědět, že je select vyměněný. */
.field.is-err .vyber__tlacitko{border-color:var(--danger,#B42318);box-shadow:0 0 0 3px rgba(180,35,24,.16)}

/* Dotykem se míří hůř než myší. Systémový seznam měl na mobilu položky přes
   celý řádek; když ho nahrazujeme, nesmí být cíl menší, než se dá trefit. */
@media (pointer:coarse){
  .vyber__moznost{padding:13px 14px;font-size:var(--fs-mala,.9375rem)}
  .vyber__panel{max-height:min(60vh,420px)}
}

@media (prefers-reduced-motion:reduce){
  .vyber__panel,.vyber__tlacitko::after{transition:none}
}