/* Kulisy vzorniku tokenu a stranky bran - katalog, ne soucast Kitu.
   Zamerne mimo Axlon.Kit, stejne jako story-canvas.css: tyhle stranky nejsou
   komponenty a nemely by se pletlo do CSS Kitu ani do jeho kontraktu.

   VSECHNO PRESTO JEDE NA TOKENECH. Neni to formalita - stranka, ktera vzornik
   tokenu vykresli mimo tokenovou soustavu, by dokazovala opak toho, co ma.
   Tokenova brana tenhle soubor kontroluje (kontrola 3: kazdy pouzity token
   musi byt v portu), takze to nedrzi discipline. */

.axl-vzornik {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--axl-sp-6);
  font-size: var(--axl-text-body);
  line-height: var(--axl-text-body-lh);
}

.axl-vzornik th {
  text-align: start;
  font-size: var(--axl-text-caption);
  line-height: var(--axl-text-caption-lh);
  color: var(--axl-color-text-muted);
  font-weight: var(--axl-weight-medium);
  border-block-end: var(--axl-border-thin) solid var(--axl-color-border-strong);
  padding: var(--axl-sp-3) var(--axl-sp-4);
}

.axl-vzornik td {
  border-block-end: var(--axl-border-hair) solid var(--axl-color-border-subtle);
  padding: var(--axl-sp-3) var(--axl-sp-4);
  vertical-align: middle;
}

/* Prvni sloupec drzi vzorek, takze se nesmi roztahovat podle obsahu. */
.axl-vzornik td:first-child,
.axl-vzornik th:first-child {
  inline-size: var(--axl-sp-12);
}

.axl-vzornik code {
  font-family: var(--axl-font-mono);
  font-size: var(--axl-text-caption);
}

/* Vzorek barvy. Kresli se pres var() z inline stylu, ne z vypsane hodnoty -
   proto se v tmavem motivu prekresli sam. Ramecek je tam kvuli bilé: bez nej
   by --axl-n-0 na svetlem podkladu nebyla videt vubec. */
.axl-vzornik__barva {
  display: block;
  inline-size: var(--axl-sp-10);
  block-size: var(--axl-sp-8);
  border-radius: var(--axl-radius-small);
  border: var(--axl-border-hair) solid var(--axl-color-border);
}

/* Vzorek rozmeru. Sirka JE ta hodnota - pruh se meri okem proti sousednim. */
.axl-vzornik__rozmer {
  display: block;
  block-size: var(--axl-sp-4);
  min-inline-size: var(--axl-border-hair);
  max-inline-size: 100%;
  border-radius: var(--axl-radius-small);
  background: var(--axl-color-action);
}

/* Vzorek stinu. Stin se nekresli podkladem, ale box-shadow - jinak vyjde
   pruhledny, protoze hodnota stinu neni barva, jen ji obsahuje. */
.axl-vzornik__stin {
  display: block;
  inline-size: var(--axl-sp-10);
  block-size: var(--axl-sp-8);
  border-radius: var(--axl-radius-small);
  background: var(--axl-color-surface);
}

.axl-vzornik__zadny {
  display: block;
  inline-size: var(--axl-sp-10);
  block-size: var(--axl-border-thick);
  border-radius: var(--axl-radius-pill);
  background: var(--axl-color-border);
}

/* Znacka "v tmavem motivu jina hodnota". */
.axl-vzornik__tma {
  color: var(--axl-color-text-muted);
  cursor: help;
}

/* --- Stranka bran ---------------------------------------------------------
   Vypis toho, co ktera brana hlida, a jak vypada jeji vystup. */

.axl-brana {
  border: var(--axl-border-thin) solid var(--axl-color-border);
  border-radius: var(--axl-radius-surface);
  background: var(--axl-color-surface);
  padding: var(--axl-sp-6);
  margin-block: var(--axl-sp-5);
}

.axl-brana__jmeno {
  font-size: var(--axl-text-title-sm);
  line-height: var(--axl-text-title-sm-lh);
  font-weight: var(--axl-weight-semibold);
  margin-block-end: var(--axl-sp-2);
}

.axl-brana__prikaz {
  font-family: var(--axl-font-mono);
  font-size: var(--axl-text-caption);
  color: var(--axl-color-text-secondary);
  margin-block-end: var(--axl-sp-4);
}

.axl-brana__stav {
  display: inline-block;
  font-size: var(--axl-text-micro);
  line-height: var(--axl-text-micro-lh);
  font-weight: var(--axl-weight-semibold);
  border-radius: var(--axl-radius-pill);
  padding: var(--axl-sp-1) var(--axl-sp-3);
  background: var(--axl-color-ok-bg);
  color: var(--axl-color-ok-fg);
}