/*
 * Barvy kamenů.
 *
 * ---------------------------------------------------------------------
 * PROČ BAREVNÉ TEČKY A NE JEN SEZNAM
 *
 * Filtr "Kámen" byl textový seznam třinácti jmen. Kdo nezná rozdíl
 * mezi avanturínem a chalcedonem — tedy skoro každý — z něj vybrat
 * nedokáže; musí proklikat kategorii po kategorii a dívat se na fotky.
 *
 * Tečka s barvou kamene udělá z filtru paletu. Člověk nehledá jméno,
 * hledá barvu, kterou chce nosit, a to je to, jak se šperky doopravdy
 * vybírají.
 *
 * ---------------------------------------------------------------------
 * ODKUD JSOU BARVY
 *
 * Z mineralogického vzhledu kamene, ne z náhodné palety: malachit je
 * pruhovaný zelený, tygří oko zlatohnědé s leskem, achát šedobílý
 * s pruhy. Kameny s výraznou kresbou mají gradient, jednolité plnou
 * barvu — proto je u některých `background-image` a u jiných jen
 * `background-color`.
 *
 * Když kámen v seznamu chybí (majitelka přidá nový), tečka zůstane
 * neutrálně šedá. Nic se nerozbije, jen ten jeden kámen nemá barvu.
 */

.ls-filtry__polozka {
  /* Tečka a text na jednom řádku, počet vpravo. */
  gap: 0.625rem;
}

.ls-kamen {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;

  /*
   * Tenký obrys drží tvar i u světlých kamenů (křišťál, růženín),
   * které by se jinak na bílém pozadí ztratily.
   */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);

  /* Neznámý kámen: neutrální šedá místo prázdna. */
  background: #c9c6c2;
}

/* Zelené */
.ls-kamen[data-kamen="malachit"] {
  background-image: linear-gradient(135deg, #1b7340 0%, #2f9b5c 38%, #0f5c33 62%, #38a86a 100%);
}

.ls-kamen[data-kamen="avanturin"] {
  background-image: linear-gradient(135deg, #3e8b5f 0%, #5aa87a 100%);
}

/* Fialové a růžové */
.ls-kamen[data-kamen="ametyst"] {
  background-image: linear-gradient(135deg, #5d4089 0%, #9b7bc4 100%);
}

.ls-kamen[data-kamen="ruzenin"] {
  background-image: linear-gradient(135deg, #e8a0a8 0%, #f3c9ce 100%);
}

/* Červené a hnědé */
.ls-kamen[data-kamen="jaspis"] {
  background-image: linear-gradient(135deg, #8c3a2b 0%, #b5553f 55%, #6e2b20 100%);
}

.ls-kamen[data-kamen="tygri-oko"] {
  /* Lesk tygřího oka je pruh světla napříč kamenem. */
  background-image: linear-gradient(135deg, #7a4512 0%, #c98b36 45%, #e8b96a 52%, #96561a 100%);
}

/* Modré */
.ls-kamen[data-kamen="tyrkys"] {
  background-image: linear-gradient(135deg, #25a8a8 0%, #4fd0cd 100%);
}

.ls-kamen[data-kamen="sodalit"] {
  background-image: linear-gradient(135deg, #1f3c86 0%, #3a62c4 60%, #162d66 100%);
}

.ls-kamen[data-kamen="chalcedon"] {
  background-image: linear-gradient(135deg, #a6c5d4 0%, #cfe0e8 100%);
}

/* Šedé, čiré, černé */
.ls-kamen[data-kamen="achat"] {
  background-image: linear-gradient(135deg, #b9ac9d 0%, #ece4da 40%, #8e8275 70%, #d6cbbd 100%);
}

.ls-kamen[data-kamen="kristal"] {
  background-image: linear-gradient(135deg, #e4ebef 0%, #ffffff 45%, #ccd8df 100%);
}

.ls-kamen[data-kamen="hematit"] {
  background-image: linear-gradient(135deg, #3a3a42 0%, #6e6e78 48%, #2a2a31 100%);
}

.ls-kamen[data-kamen="obsidian"] {
  background-image: linear-gradient(135deg, #15151a 0%, #3c3c44 50%, #0c0c0f 100%);
}

/* ------------------------------------------------------------------ */
/* Kámen na detailu kusu                                               */
/* ------------------------------------------------------------------ */

/*
 * Tatáž tečka u vlastnosti na detailu. Větší, protože tam stojí
 * sama a nese řádek.
 */
.ls-detail__vlastnosti .ls-kamen {
  width: 1rem;
  height: 1rem;
  margin-right: 0.125rem;
  vertical-align: -0.1em;
  display: inline-block;
}

/*
 * Kameny doplněné podle názvů kusů: amazonit, karneol, býčí oko
 * a mořská mušle. Bez vlastní barvy by u nich zůstalo neutrální
 * šedé kolečko a ve filtru by nešly rozeznat od sebe.
 */

/* Amazonit — bledě tyrkysová se zeleným nádechem. */
.ls-kamen[data-kamen="amazonit"] {
  background: linear-gradient(135deg, #7fc8bd, #a8d8cf);
}

/* Karneol — sytě oranžovočervený. */
.ls-kamen[data-kamen="karneol"] {
  background: linear-gradient(135deg, #b5431f, #d4703f);
}

/* Býčí oko — tmavší a červenější protějšek tygřího oka. */
.ls-kamen[data-kamen="byci-oko"] {
  background: linear-gradient(135deg, #6b3a24, #a66038);
}

/* Mořská mušle — perleťově krémová. */
.ls-kamen[data-kamen="morska-musle"] {
  background: linear-gradient(135deg, #efe3d4, #d6c3ae);
}