/**
 * Bryter - skyveknapp (toggle switch).
 */

/* --- Toggle-switch (skyveknapp) --- */
.ds1_bryter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.ds1_bryter input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ds1_bryter .track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.ds1_bryter .track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ds1_bryter input:checked + .track {
    background: var(--primary-ui, var(--primary));
}
.ds1_bryter input:checked + .track::after {
    transform: translateX(20px);
}
.ds1_bryter input:focus-visible + .track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-ui, var(--primary)) 30%, transparent);
}
.ds1_bryter input:disabled + .track {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Berøringsskjerm: hele etiketten er trykkflaten og minst `--tap` (44 px) høy; skyveknappen er uendret. */
@media (pointer: coarse) {
    .ds1_bryter { min-height: var(--tap, 44px); }
}