/* styles/default/components/c-swatch.css — #28 výběr tónu: radiogroup kroužků (t-*, --tone-dot); vybraný s ringem a fajfkou; --sm
   Created :: 2026-10-22
   Updated :: 2026-10-29
   2026-10-29 :: 1.0.3 – .c-field > .c-swatch výška control-h
   2026-10-28 :: M9 – úklid a revize (viz 04 kap. 3) */

.c-swatch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.c-field > .c-swatch { min-height: var(--control-h); }   /* jako ovládací prvek pole: stejná výška jako c-input, kroužky uprostřed – řádek s flex-end má štítky i prvky v jedné rovině (1.0.3) */
.c-swatch__item { position: relative; display: inline-flex; width: 2.4rem; height: 2.4rem; border-radius: var(--r-full); cursor: pointer; }
.c-swatch__dot {
  width: 100%;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--tone-dot);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.c-swatch__item:hover .c-swatch__dot { transform: scale(1.1); }
.c-swatch__item:has(input:checked) .c-swatch__dot { box-shadow: 0 0 0 var(--stroke-2) var(--color-surface), 0 0 0 calc(2 * var(--stroke-2)) var(--tone-dot); }
.c-swatch__item:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .45rem;
  height: .85rem;
  border-right: var(--stroke-2) solid var(--color-text-inverse);
  border-bottom: var(--stroke-2) solid var(--color-text-inverse);
  transform: translate(-50%, -62%) rotate(45deg);
}
.c-swatch__item:has(input:focus-visible) .c-swatch__dot { box-shadow: 0 0 0 var(--stroke-2) var(--color-surface), 0 0 0 calc(2 * var(--stroke-2)) var(--color-primary); }

.c-swatch--sm { gap: var(--sp-1); }
.c-swatch--sm .c-swatch__item { width: 1.8rem; height: 1.8rem; }
.c-swatch--sm .c-swatch__item:has(input:checked)::after { width: .35rem; height: .65rem; }