/* ==========================================================================
   KONTROLKA: PRZELACZNIK
   Typ Boolean. Zmierzone uzycie: 230.
   Jedyna kontrolka w bibliotece z etykieta OBOK, nie nad, bo przelacznik
   bez etykiety w tej samej linii jest nieczytelny.

   stan-nieobecny: readonly | powod: przelacznik tylko do odczytu jest
   nierozroznialny od wylaczonego, wiec w tym stanie uzywamy wylaczonego.
   ========================================================================== */
.k-pole-poziome{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--odstep-2);
}
.k-pole-poziome .k-pomoc{ grid-column: 2; }

.k-przelacznik{
  appearance: none;
  inline-size: calc(var(--u) * 9);
  block-size: calc(var(--u) * 5);
  flex: none;
  background: var(--kreska-2);
  border-radius: var(--promien-pelny);
  position: relative;
  cursor: pointer;
  transition: background-color var(--czas-2) var(--wyjscie);
}
.k-przelacznik::after{
  content: "";
  position: absolute;
  inset-block-start: var(--odstep-1);
  inset-inline-start: var(--odstep-1);
  inline-size: calc(var(--u) * 3);
  block-size: calc(var(--u) * 3);
  background: var(--plyta);
  border-radius: var(--promien-pelny);
  transition: transform var(--czas-2) var(--wyjscie);
}
.k-przelacznik:checked{ background: var(--marka); }
.k-przelacznik:checked::after{ transform: translateX(calc(var(--u) * 4)); }
.k-przelacznik:indeterminate{ background: var(--ostrzezenie); }
.k-przelacznik:indeterminate::after{ transform: translateX(calc(var(--u) * 2)); }
.k-przelacznik:hover:not(:disabled){ background: var(--pole-kreska-mocna); }
.k-przelacznik:checked:hover:not(:disabled){ background: var(--marka-ciemna); }
.k-przelacznik:focus-visible{
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}
.k-przelacznik:active::after{ transform: var(--wcisniecie); }
.k-przelacznik:checked:active::after{
  transform: translateX(calc(var(--u) * 4)) var(--wcisniecie);
}
.k-przelacznik:disabled{
  background: var(--kreska);
  cursor: not-allowed;
}
.k-przelacznik:disabled::after{ background: var(--plyta-2); }
.k-przelacznik[aria-busy="true"]{ opacity: .6; pointer-events: none; }
.k-przelacznik[aria-invalid="true"]{
  outline: 1px solid var(--alarm);
  outline-offset: var(--pierscien-odstep);
}
.k-przelacznik[data-stan="powodzenie"]{ background: var(--powodzenie); }
.k-etykieta-obok{ cursor: pointer; }
@media (prefers-reduced-motion: reduce){
  .k-przelacznik, .k-przelacznik::after{ transition: none; }
  .k-przelacznik:active::after{ transform: none; }
  .k-przelacznik:checked:active::after{ transform: translateX(calc(var(--u) * 4)); }
}