/* ======================================================================
   QWICK -- KOMPONENT: akčné tlačidlo

   JEDINÝ ZDROJ. Aplikácia aj moduly používajú tie isté tri role.

   FARBA AKCIE JE PEVNÁ, NIE PODĽA MODULU
   --------------------------------------
   Aplikácia musí byť konzistentná: tá istá akcia má všade tú istú farbu.
   Tlačidlo Uložiť je modré v MOVES aj v TRIPS -- neprebíja sa rolou
   `--accent`. Predtým Uložiť siahalo na `--accent`, takže v module bolo
   zelené a v základe modré; tá istá akcia mala dva vzhľady.

   Uložiť      modrá
   Upraviť     tmavomodrá  (sekundárna akcia, nie CTA)
   Vymazať     červená

   Dátumová pilulka je modrá tiež -- žije v komponente sheet
   (`styles/15-sheet.css`), lebo patrí k poliam formulára.

   VÝNIMKY, KTORÉ FARBU MODULU NESÚ
   --------------------------------
   Iba tieto tri smú siahať na rolu `--accent`, lebo ich úlohou je
   povedať, v ktorej časti aplikácie sa používateľ nachádza:

     - tlačidlá období           (`styles/02-dashboard.css`)
     - šípky prepínania období   (`styles/02-dashboard.css`)
     - tlačidlo QWICK / FAB      (`styles/02-dashboard.css`)

   Každý modul a časť aplikácie má svoju zvolenú farbu; tá sa prejaví
   práve a len na týchto troch. Nikde inde. Keď budeš pridávať tlačidlo,
   NEDÁVAJ mu `var(--accent)` -- vyber mu rolu z tohto súboru.

   ROLE
   ----
   .qwick-action-save    .qwick-action-edit    .qwick-action-delete
   .qwick-action-navigate
   .qwick-action-row     dvojica Upraviť / Vymazať vedľa seba
   ====================================================================== */

/* Farby akcií (--qwick-save, --qwick-edit, --qwick-delete) su v
   styles/00-tokens/01-semantic.css: su to roly celej aplikacie, nie
   sukromne premenne tohto komponentu. */

/* ---- spoločný materiál ------------------------------------------------- */
.qwick-surface .qwick-action-save,
.qwick-surface .qwick-action-edit,
.qwick-surface .qwick-action-delete,
.qwick-surface .qwick-action-navigate{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  box-sizing:border-box;
  border-radius:999px;
  color:var(--qwick-action-color);
  -webkit-text-fill-color:var(--qwick-action-color);
  text-shadow:none;
  font-weight:850;
  /* Potvrdzovacia veta zostava jednym riadkom aj pocas zmeny sirky. */
  white-space:nowrap;
  overflow:hidden;
  /* Sirka sa meni pri odisteni mazania: Upravit ustupi a Vymazat narastie. */
  transition:transform .24s cubic-bezier(.34,1.56,.64,1),
             filter .16s ease,
             background-color .3s ease,
             background-image .3s ease,
             color .3s ease,
             opacity .3s ease,
             padding .3s cubic-bezier(.22,1,.36,1),
             width .3s cubic-bezier(.22,1,.36,1);
  will-change:transform,filter;
}

.qwick-surface .qwick-action-save{ --qwick-action-color:var(--qwick-save); }
.qwick-surface .qwick-action-edit{ --qwick-action-color:var(--qwick-edit); }
.qwick-surface .qwick-action-delete{ --qwick-action-color:var(--qwick-delete); }
.qwick-surface .qwick-action-navigate{ --qwick-action-color:var(--mint); }

/* Tmavomodrá Upraviť potrebuje svetlejší text, inak je na tmavom skle
   nečitateľná. Preto je to jediná z trojice, ktorej sa farba textu
   a farba identity rozchádzajú -- tint si preto v
   `styles/21-control-material.css` deklaruje výslovne, aby vzal okraj
   a nie text. */
.qwick-surface .qwick-action-edit{
  color:#a8c8ff;
  -webkit-text-fill-color:#a8c8ff;
}

/* Vymazať je jediná nevratná akcia, takže musí byť rozoznateľná na prvý
   pohľad -- červený tieň, nie iba červený text. Výplň nesie zdieľaný
   materiál ovládacieho prvku, rovnako ako u ostatných dvoch. */
.qwick-surface .qwick-action-delete{
}
.qwick-surface .qwick-action-delete.is-pressed{
}

/* ---- odozva na stlačenie ----------------------------------------------- */
.qwick-surface .qwick-action-save.is-pressed,
.qwick-surface .qwick-action-edit.is-pressed,
.qwick-surface .qwick-action-delete.is-pressed,
.qwick-surface .qwick-action-navigate.is-pressed{
  transform:scale(.96);
  filter:brightness(1.08);
  transition:transform .08s cubic-bezier(.4,0,1,1),filter .10s ease;
}

/* ---- geometria ---------------------------------------------------------
   Uložiť zaberá presne tú istú plochu ako dvojica Upraviť / Vymazať,
   ktorú nahrádza -- preto rovnaká výška aj odsadenie. */
.qwick-surface .qwick-action-save,
.qwick-surface .qwick-action-navigate,
.qwick-surface .qwick-action-row > button{
  height:49px;
  min-height:49px;
  padding:0 15px;
  font-family:inherit;
  font-size:15px;
}
.qwick-surface .qwick-action-save{
  margin-top:4px;
}
.qwick-surface .qwick-action-save[hidden]{display:none;}
.qwick-surface .qwick-action-save:disabled{
  opacity:.65;
  pointer-events:none;
}
.qwick-surface .qwick-action-navigate:disabled{
  opacity:.65;
  pointer-events:none;
}

/* Riadok akcii je flex, nie grid: sirku si v nom nesu samotne tlacidla, takze
   sa da plynulo menit. Grid by musel animovat stopy, co Safari na starsich
   iOS neinterpoluje. */
.qwick-surface .qwick-action-row{
  width:100%;
  height:49px;
  min-height:49px;
  display:flex;
  gap:10px;
  margin-top:4px;
  box-sizing:border-box;
}
/* Odistene mazanie si berie dve tretiny riadku, Zrusit ustupi na tretinu.
   Obe tlacidla dostanu .is-armed v tom istom okamihu z jedneho zdroja
   (QwickEngine.makeArmedDelete), takze sa hybu naraz -- nie jedno po druhom. */
.qwick-surface .qwick-action-row > .qwick-action-edit,
.qwick-surface .qwick-action-row > .qwick-action-delete{
  flex:0 0 auto;
  width:calc(50% - 5px);
}
.qwick-surface .qwick-action-row > .qwick-action-edit.is-armed{
  width:calc(33.333% - 5px);
}
.qwick-surface .qwick-action-row > .qwick-action-delete.is-armed{
  width:calc(66.667% - 5px);
}
.qwick-surface .qwick-action-row[hidden]{display:none;}

@media(prefers-reduced-motion:reduce){
  .qwick-surface .qwick-action-save,
  .qwick-surface .qwick-action-edit,
  .qwick-surface .qwick-action-delete,
  .qwick-surface .qwick-action-navigate{
    transition-duration:.01ms;
  }
}