/* ==========================================================================
   SZKIELET: DZIALANIA
   Przycisk w czterech tonach, przycisk dzielony, pasek dzialan, dymek, ikona.

   stan-nieobecny: readonly, error | powod: dzialania nie maja stanu odczytu
   ani bledu walidacji. Dzialanie niszczace niesie ton alarm, ktory jest
   znaczeniem, a nie stanem pola.
   ========================================================================== */

.k-ikona {
  display: inline-flex;
  inline-size: calc(var(--u) * 4);
  block-size: calc(var(--u) * 4);
  flex: none;
}

.k-ikona svg {
  inline-size: 100%;
  block-size: 100%;
}

/* --- przycisk ---------------------------------------------------------- */
.k-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--odstep-2);
  block-size: var(--wys-aktualna);
  padding-inline: var(--odstep-4);
  font: var(--tekst-wartosc);
  font-weight: 500;
  border-radius: var(--promien-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie),
              border-color var(--czas-1) var(--wyjscie),
              color var(--czas-1) var(--wyjscie);
}

/* JEDEN glowny na widoku. Marka sluzy interakcji. */
.k-przycisk-glowny {
  color: var(--plyta);
  background: var(--marka);
  border: 1px solid var(--marka);
}

.k-przycisk-glowny:hover:not(:disabled) {
  background: var(--marka-ciemna);
  border-color: var(--marka-ciemna);
}

.k-przycisk-zwykly {
  color: var(--atrament);
  background: var(--plyta);
  border: 1px solid var(--kreska-2);
}

.k-przycisk-zwykly:hover:not(:disabled) {
  border-color: var(--pole-kreska-mocna);
  background: var(--plyta-2);
}

.k-przycisk-cichy {
  color: var(--atrament-2);
  background: none;
  border: 1px solid transparent;
}

.k-przycisk-cichy:hover:not(:disabled) {
  background: var(--plyta-2);
  color: var(--atrament);
}

/* alarm to dzialanie niszczace, nie kazde czerwone. Wypelnia sie dopiero
   pod kursorem, zeby nie krzyczal z ekranu bez powodu. */
.k-przycisk-alarm {
  color: var(--alarm);
  background: none;
  border: 1px solid var(--alarm);
}

.k-przycisk-alarm:hover:not(:disabled) {
  color: var(--plyta);
  background: var(--alarm);
}

.k-przycisk:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}

.k-przycisk-alarm:focus-visible {
  outline-color: var(--alarm);
}

.k-przycisk:active:not(:disabled) {
  transform: var(--wcisniecie);
}

.k-przycisk:disabled {
  color: var(--atrament-3);
  background: var(--pole-tlo-wylaczone);
  border-color: var(--kreska);
  cursor: not-allowed;
}

/* dzialanie w toku: przycisk zablokowany, etykieta zostaje, bo czlowiek
   ma wiedziec, CO trwa */
.k-przycisk[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

.k-przycisk[aria-busy="true"] .k-przycisk-tekst {
  animation: k-przycisk-puls 1.2s var(--wyjscie) infinite;
}

@keyframes k-przycisk-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* --- przycisk dzielony -------------------------------------------------- */
.k-przycisk-zestaw {
  display: inline-flex;
  position: relative;
}

.k-przycisk-zestaw .k-przycisk:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.k-przycisk-strzalka {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: -1px;
  padding-inline: var(--odstep-2);
}

.k-przycisk-lista {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  z-index: var(--warstwa-lista);
  margin-block-start: var(--odstep-1);
  min-inline-size: 100%;
  display: grid;
  background: var(--plyta);
  border: 1px solid var(--kreska);
  border-radius: var(--promien-2);
  box-shadow: var(--cien-lista);
  padding: var(--odstep-1);
}

.k-przycisk-wariant {
  display: block;
  inline-size: 100%;
  text-align: start;
  font: var(--tekst-wartosc);
  color: var(--atrament);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  padding: var(--odstep-2) var(--odstep-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-przycisk-wariant:hover {
  background: var(--marka-mgla);
}

.k-przycisk-wariant:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: calc(var(--pierscien-odstep) * -1);
}

/* --- pasek dzialan ------------------------------------------------------ */
.k-dzialania {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-3);
  padding-block: var(--odstep-2);
}

.k-dzialania-lewo,
.k-dzialania-prawo {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  flex-wrap: wrap;
}

/* --- dymek. Widoczny na najechaniu I skupieniu, inaczej uzytkownik
       klawiatury nie zobaczy go nigdy. Warstwa najwyzsza, nad oknem. --- */
.k-dymek-kotwica {
  position: relative;
}

.k-dymek-kotwica::after {
  content: attr(data-dymek);
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 100%;
  z-index: var(--warstwa-podpowiedz);
  transform: translateX(-50%) translateY(calc(var(--u) * -1)) scale(.95);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  font: var(--tekst-pomoc);
  color: var(--plyta);
  background: var(--atrament);
  border-radius: var(--promien-1);
  padding: var(--odstep-1) var(--odstep-2);
  transition: opacity var(--czas-2) var(--wyjscie),
              transform var(--czas-2) var(--wyjscie);
}

.k-dymek-kotwica:hover::after,
.k-dymek-kotwica:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(calc(var(--u) * -1)) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .k-przycisk,
  .k-przycisk-wariant,
  .k-dymek-kotwica::after {
    transition: none;
  }
  .k-przycisk:active:not(:disabled) {
    transform: none;
  }
  .k-przycisk[aria-busy="true"] .k-przycisk-tekst {
    animation: none;
  }
}