/* Option row wrapper (50px tall) */
.uacc-toggle-wrapper {
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    height: 50px; /* fixed row height */
    width: 100%;
    background-color: var(--uacc-background3);
    border-radius: 1rem;
    box-sizing: border-box;
}

/* Toggle wrapper */
.uacc-toggle {
    position: relative;
    width: 46px; /* track width */
    height: 26px; /* track height */
    display: inline-block;
    cursor: pointer;
}

/* Hidden input */
.uacc-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Track (pill background) */
.uacc-toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--uacc-ternary);
    border-radius: 999px;
    transition: background-color 0.3s ease;
}

/* Thumb (circle knob) */
.uacc-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--uacc-text);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Checked state */
.uacc-toggle-input:checked + .uacc-toggle-track {
    background-color: var(--uacc-primary);
}

.uacc-toggle-input:checked + .uacc-toggle-track .uacc-toggle-thumb {
    transform: translateX(20px); /* track width - thumb width - 4px padding */
    background-color: var(--uacc-background3);
}

.uacc-toggle-wrapper:focus, .uacc-toggle-wrapper:hover {
    border-color: var(--uacc-primary);
    background-color: color-mix(in srgb, var(--uacc-background1) 90%, var(--uacc-primary) 10%);
}