/* ==========================================================================
   tp-swatch — Farbauswahl als Punktreihe
   --------------------------------------------------------------------------
     .tp-swatch-picker
       └── label.tp-swatch
             ├── input[type=radio]   (visuell verborgen)
             └── span.tp-swatch__dot (Farbe via --tp-swatch-color)

   Die Farbe kommt über eine Custom Property statt über ein style-Attribut auf
   dem Punkt, damit Hover- und Checked-Zustände sie weiterverwenden können.
   ========================================================================== */

.tp-swatch-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tp-swatch {
    position: relative;
    display: block;
    cursor: pointer;
    line-height: 0;
}

.tp-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tp-swatch__dot {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tp-swatch-color, var(--accent));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease);
}

.tp-swatch:hover .tp-swatch__dot {
    transform: scale(1.1);
}

/* Der Ring nimmt die Farbe des Punkts auf, statt einen neutralen Rahmen zu
   setzen — dadurch bleibt die Auswahl auch bei vielen Punkten eindeutig. */
.tp-swatch input:checked + .tp-swatch__dot {
    transform: scale(1.1);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 0 2px var(--surface),
        0 0 0 4px var(--tp-swatch-color, var(--accent));
}

.tp-swatch input:focus-visible + .tp-swatch__dot {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 0 2px var(--surface),
        0 0 0 4px var(--text-1);
}

/* In der Dialog-Schiene liegt der Punkt auf --surface-2; der Trennring muss
   dieselbe Fläche treffen, sonst entsteht ein heller Saum. */
.tp-dialog__aside .tp-swatch input:checked + .tp-swatch__dot,
.tp-dialog__aside .tp-swatch input:focus-visible + .tp-swatch__dot {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 0 2px var(--surface-2),
        0 0 0 4px var(--tp-swatch-color, var(--accent));
}