/*
 * Coral: bublinka s nápovědou (Hlína 49), základní vzhled.
 *
 * Poloha, strana (data-strana) a místo šipky (--coral-sipka-x, --coral-sipka-y)
 * přicházejí z coral-plovouci.js, chování z coral-tip.js. Vzhled je věc webu:
 * nastaví proměnné ve svém jádře, nebo si .coral-tip nakreslí celou sám.
 * Všechno je pod :where(), takže každé pravidlo webu vyhraje bez ohledu na
 * pořadí stylů.
 *
 *   --coral-tip-pozadi, --coral-tip-barva, --coral-tip-hrana (barva čáry),
 *   --coral-tip-radius, --coral-tip-stin, --coral-tip-pismo, --coral-tip-velikost,
 *   --coral-tip-vaha, --coral-tip-vnitrek (padding), --coral-tip-max-sirka,
 *   --coral-tip-sipka (polovina šipky u bubliny vysoké 34 px, výchozí 5px,
 *   0px = bez šipky; úměrně velikosti bubliny ji upraví --coral-sipka-meritko
 *   z coral-plovouci.js),
 *   --coral-tip-odstup (mezera od kotvy, i se šipkou)
 */
:where(.coral-tip) {
  --_sipka: calc(var(--coral-tip-sipka, 5px) * var(--coral-sipka-meritko, 1));
  --_hrana: var(--coral-tip-hrana, transparent);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: var(--coral-tip-max-sirka, 260px);
  margin: 0;
  padding: var(--coral-tip-vnitrek, 7px 11px);
  border: 1px solid var(--_hrana);
  border-radius: var(--coral-tip-radius, 10px);
  background: var(--coral-tip-pozadi, #221c19);
  color: var(--coral-tip-barva, #f3ebe2);
  box-shadow: var(--coral-tip-stin, 0 10px 24px -14px rgba(0, 0, 0, 0.55));
  font-family: var(--coral-tip-pismo);
  font-size: var(--coral-tip-velikost, 13px);
  font-weight: var(--coral-tip-vaha, 500);
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.14s ease, translate 0.14s ease, visibility 0s linear 0.14s;
}
:where(.coral-tip[data-strana="nahore"]) { translate: 0 3px; }
:where(.coral-tip[data-strana="dole"]) { translate: 0 -3px; }
:where(.coral-tip[data-strana="vlevo"]) { translate: 3px 0; }
:where(.coral-tip[data-strana="vpravo"]) { translate: -3px 0; }
:where(.coral-tip.je-videt) {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.14s ease, translate 0.14s ease;
}

:where(.coral-tip__obsah) {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Šipka: čtverec otočený o 45°, v barvě bubliny; čáru má jen na dvou
   vnějších stranách, takže uvnitř bubliny není vidět. */
:where(.coral-tip__sipka) {
  position: absolute;
  width: calc(var(--_sipka) * 2);
  height: calc(var(--_sipka) * 2);
  box-sizing: border-box;
  background: inherit;
  border: 1px solid transparent;
  rotate: 45deg;
  pointer-events: none;
}
:where(.coral-tip[data-strana="nahore"]) :where(.coral-tip__sipka) {
  top: calc(100% - var(--_sipka) + 0.5px);
  left: calc(var(--coral-sipka-x, 50%) - var(--_sipka) - 1px);
  border-right-color: var(--_hrana);
  border-bottom-color: var(--_hrana);
}
:where(.coral-tip[data-strana="dole"]) :where(.coral-tip__sipka) {
  bottom: calc(100% - var(--_sipka) + 0.5px);
  left: calc(var(--coral-sipka-x, 50%) - var(--_sipka) - 1px);
  border-left-color: var(--_hrana);
  border-top-color: var(--_hrana);
}
:where(.coral-tip[data-strana="vlevo"]) :where(.coral-tip__sipka) {
  left: calc(100% - var(--_sipka) + 0.5px);
  top: calc(var(--coral-sipka-y, 50%) - var(--_sipka) - 1px);
  border-top-color: var(--_hrana);
  border-right-color: var(--_hrana);
}
:where(.coral-tip[data-strana="vpravo"]) :where(.coral-tip__sipka) {
  right: calc(100% - var(--_sipka) + 0.5px);
  top: calc(var(--coral-sipka-y, 50%) - var(--_sipka) - 1px);
  border-bottom-color: var(--_hrana);
  border-left-color: var(--_hrana);
}

/* Po podržení prstu na tlačítku s bublinou nevyskakuje bublina systému. */
:where(button[data-coral-tip], [role="button"][data-coral-tip]) { -webkit-touch-callout: none; }

@media (prefers-reduced-motion: reduce) {
  :where(.coral-tip), :where(.coral-tip.je-videt) { transition: none; translate: none; }
}