/* ======================================================================
   KOMPONENT: QWICK KEYBOARD -- vzhlad vlastnej klavesnice.

   Zaklad klavesov nesie vendorovana kniznica (`styles/18-keyboard-vendor.css`,
   simple-keyboard, MIT). Tento subor je iba jej Qwick koza -- vsetky
   nastavitelne hodnoty (rozmery, farby, animacie) su zdielane roly a stoja
   preto vo vrstve tokenov, v `styles/00-tokens/01-semantic.css`.

   Zamerne je to zatial iba funkcny zaklad v existujucom jazyku aplikacie
   (zaoblenie, modry tint, sklo) -- nie novy dizajn.
   ====================================================================== */

/* ---- vrstva ----------------------------------------------------------- */
.qwick-keyboard-layer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2200;
  padding:var(--qwick-kb-pad);
  padding-bottom:calc(var(--qwick-kb-pad) + env(safe-area-inset-bottom,0px));
  box-sizing:border-box;
  /* Rozostrenie tu NESTOJI: `backdrop-filter` vlastni jediny zdroj
     materialu (styles/21-control-material.css) a druhy by z neho spravil
     dva. Tlacidla Spat a Ulozit sklo dostavaju odtial, lebo nesu svoje
     zdielane triedy. Plocha klavesnice je zatial cista vypln -- je to
     funkcny zaklad, na ktorom sa da material presne nadizajnovat. */
  background:var(--qwick-kb-surface);
  /* Klavesnica sa neroluje a nic sa v nej neoznacuje -- tahanie prstom po
     nej nesmie spustit vyber textu ani posun stranky pod nou. Vendor to
     ma iba na ploche klavesov, riadok Spat / Ulozit stoji mimo nej. */
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  transform:translate3d(0,100%,0);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform var(--qwick-kb-leave),
             opacity var(--qwick-kb-leave),
             visibility 0s linear var(--qwick-kb-leave-time);
}
.qwick-keyboard-layer.is-open{
  transform:translate3d(0,0,0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:transform var(--qwick-kb-enter),
             opacity var(--qwick-kb-enter);
}

/* ---- dvojica tlacidiel nad klavesmi ------------------------------------
   Spat a Ulozit stoja v JEDNOM riadku nad klavesmi: vlavo Spat v presnej
   tretine sirky, vpravo Ulozit (v mape Pridat) so zvyskom. Material aj
   farbu nesu zdielane `.qwick-back-yellow` a `.qwick-action-save` -- tu je
   iba raster. */
.qwick-keyboard-actions{
  display:grid;
  grid-template-columns:var(--qwick-kb-back-share) 1fr;
  gap:var(--qwick-kb-actions-gap);
  height:var(--qwick-kb-actions-height);
  margin-bottom:var(--qwick-kb-actions-gap);
}
.qwick-surface .qwick-keyboard-back,
.qwick-surface .qwick-keyboard-submit{
  height:var(--qwick-kb-actions-height);
  min-height:var(--qwick-kb-actions-height);
  margin-top:0;
}
.qwick-surface .qwick-keyboard-back{
  width:100%;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-family:inherit;
  font-size:20px;
  font-weight:850;
}

/* ---- klavesy ----------------------------------------------------------- */
.qwick-keyboard-layer .hg-theme-default{
  background:transparent;
  padding:0;
  border-radius:0;
  width:100%;
}
.qwick-keyboard-layer .hg-theme-default .hg-row{
  gap:var(--qwick-kb-key-gap);
  margin-bottom:var(--qwick-kb-key-gap);
}
.qwick-keyboard-layer .hg-theme-default .hg-row:last-child{margin-bottom:0;}
.qwick-keyboard-layer .hg-theme-default .hg-button{
  height:var(--qwick-kb-key-height);
  border-radius:var(--qwick-kb-key-radius);
  border:0;
  background:var(--qwick-kb-key-fill);
  color:var(--qwick-kb-key-color);
  font-family:inherit;
  font-size:var(--qwick-kb-key-font-size);
  font-weight:var(--qwick-kb-key-font-weight);
  box-shadow:none;
}
.qwick-keyboard-layer .hg-theme-default .hg-button:active,
.qwick-keyboard-layer .hg-theme-default .hg-button.hg-activeButton{
  background:var(--qwick-kb-key-fill-active);
}
.qwick-keyboard-layer .hg-theme-default .hg-button.hg-functionBtn{
  background:var(--qwick-kb-function-fill);
  color:var(--qwick-kb-function-color);
  font-size:15px;
  font-weight:800;
}

@media (prefers-reduced-motion:reduce){
  .qwick-keyboard-layer,
  .qwick-keyboard-layer.is-open{transition-duration:.01ms;}
}