/* Theme swap container */
.swap {
    cursor: pointer;
    user-select: none;
    display: inline-grid;
    place-content: center;
}

.swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

/* Hide the checkbox but allow state control */
.theme-controller {
    appearance: none;
    display: none;
}

/* Swap ON state (Light mode - Checkbox is CHECKED) */
.theme-controller:checked ~ .swap-on {
    opacity: 1;
    transform: rotate(0deg);
}
.theme-controller:checked ~ .swap-off {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Swap OFF state (Dark mode - Checkbox is UNCHECKED) */
.swap-on {
    opacity: 0;
    transform: rotate(90deg);
}
.swap-off {
    opacity: 1;
    transform: rotate(0deg);
}

/* Smooth theme transitions - only on specific properties */
:root {
    color-scheme: light dark;
}

html.dark {
    color-scheme: dark;
}

/* Only transition colors, not transforms or layout properties */
body,
.transition-colors {
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}