/* ==========================================================================
   KONTROLKA: LICZBA
   Typy Decimal i Int. Zmierzone uzycie: 883.
   Cyfry stalej szerokosci i wyrownanie do prawej, zeby kolumna kwot
   dala sie czytac pionowo bez wodzenia palcem.

   stan-nieobecny: active | powod: pole liczbowe nie ma stanu wcisniecia.
   ========================================================================== */
.k-liczba{
  inline-size: 100%;
  block-size: var(--wys-aktualna);
  padding-inline: var(--odstep-3);
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
  color: var(--atrament);
  background: var(--pole-tlo);
  border: 1px solid var(--pole-kreska);
  border-radius: var(--promien-1);
  transition: border-color var(--czas-1) var(--wyjscie),
              background-color var(--czas-1) var(--wyjscie);
}
.k-liczba[data-wyrownanie="do-prawej"]{ text-align: end; }
.k-liczba::placeholder{ color: var(--atrament-3); }
.k-liczba:hover:not(:disabled):not([readonly]){ border-color: var(--pole-kreska-mocna); }
.k-liczba:focus-visible{
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
  border-color: var(--marka);
  text-align: start;                 /* w edycji od lewej, bo tak sie pisze */
}
.k-liczba:disabled{
  background: var(--pole-tlo-wylaczone);
  border-color: var(--kreska);
  color: var(--atrament-3);
  cursor: not-allowed;
}
.k-liczba[readonly]{
  background: var(--plyta-2);
  border-color: transparent;
  color: var(--atrament);
  cursor: default;
}
.k-liczba[aria-busy="true"]{ opacity: .6; }
.k-liczba[aria-invalid="true"]{
  border-color: var(--alarm);
  background: var(--pole-tlo-blad);
}
.k-liczba[aria-invalid="true"]:focus-visible{ outline-color: var(--alarm); }
.k-liczba[data-stan="powodzenie"]{ border-color: var(--powodzenie); }
/* --- oprawa: wejscie, jednostka i strzalki kroku w jednym obrysie ----- */
.k-liczba-oprawa{
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
}
.k-liczba-oprawa .k-liczba{ flex: 1; min-inline-size: 0; }
.k-liczba-oprawa .k-jednostka{
  position: absolute;
  inset-inline-end: calc(var(--u) * 7);
  font: var(--tekst-pomoc);
  color: var(--atrament-jednostka);
  pointer-events: none;
}
.k-liczba-oprawa:has(.k-liczba-strzalki) .k-liczba{
  padding-inline-end: calc(var(--u) * 8);
}

/* strzalki kroku. Poza kolejnoscia zakladek, bo klawiatura ma
   strzalki gora i dol na samym polu. */
.k-liczba-strzalki{
  position: absolute;
  inset-inline-end: 1px;
  inset-block: 1px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  inline-size: calc(var(--u) * 6);
  border-inline-start: 1px solid var(--kreska);
}
.k-liczba-krok{
  display: grid;
  place-items: center;
  background: var(--plyta-2);
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--atrament-2);
  transition: background-color var(--czas-1) var(--wyjscie);
}
.k-liczba-krok::before{
  content: "";
  inline-size: 0;
  block-size: 0;
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
}
.k-liczba-krok-gora{ border-start-end-radius: var(--promien-1); }
.k-liczba-krok-gora::before{ border-block-end: 5px solid currentColor; }
.k-liczba-krok-dol{
  border-end-end-radius: var(--promien-1);
  border-block-start: 1px solid var(--kreska);
}
.k-liczba-krok-dol::before{ border-block-start: 5px solid currentColor; }
.k-liczba-krok:hover{ background: var(--marka-mgla); color: var(--marka-ciemna); }
.k-liczba-krok:active{ background: var(--kreska); }

@media (prefers-reduced-motion: reduce){
  .k-liczba, .k-liczba-krok{ transition: none; }
}