/**
 * Theme Toggle Component
 * Beautiful animated sun/moon toggle switch
 * Based on sunmoon.html design
 */

:root {
    --toggle-switch-background-color: #409fe4;
    --toggle-switch-shadow-color: rgba(0, 0, 0, 0.44);
    --toggle-sun-bg: linear-gradient(130deg, #f2fa8f, #eb9a25);
    --toggle-moon-bg: linear-gradient(130deg, #fafbfe, #9aa4b1);
    --toggle-moon-image: url("../../images/moon4.png");
    --toggle-clouds-image: url("../../images/Clouds.png");
    --toggle-stars-bg-image: url("../../images/Stars.png");
}

/* === THEME TOGGLE SWITCH === */
.theme-toggle {
    position: relative;
    display: inline-block;
}

.theme-toggle-checkbox {
    display: none;
}

.theme-toggle-switch {
    position: relative;
    width: 68px;
    height: 36px;
    border-radius: 9999px;
    background-color: var(--toggle-switch-background-color);
    box-shadow: inset -1px 5px 4px var(--toggle-switch-shadow-color);
    cursor: pointer;
    overflow: hidden;
    border: 2px solid transparent;
    transition: background-color 1s cubic-bezier(0.65, -0.05, 0.29, 1.2);
}

/* Clouds layer */
.theme-toggle-switch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--toggle-clouds-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 1.0s ease-in-out, opacity 1.0s ease-in-out;
    z-index: 1;
}

/* Stars layer */
.theme-toggle-stars {
    position: absolute;
    inset: 0;
    background-image: var(--toggle-stars-bg-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateY(-40%);
    transition: transform 1.2s cubic-bezier(0.65, -0.05, 0.29, 1.2), opacity 1.2s ease-in-out;
    z-index: 0;
}

/* Sun and Moon shared base */
.theme-toggle-sun,
.theme-toggle-moon {
    position: absolute;
    top: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all 1s cubic-bezier(0.65, -0.05, 0.29, 1.2);
    z-index: 2;
}

/* Sun */
.theme-toggle-sun {
    left: 5px;
    background-image: var(--toggle-sun-bg);
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
    opacity: 1;
}

/* Moon */
.theme-toggle-moon {
    left: 5px;
    background-image: var(--toggle-moon-bg);
    background-size: cover;
    opacity: 0;
}

.theme-toggle-moon::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background-image: var(--toggle-moon-image);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
}

/* === DARK MODE ANIMATIONS === */
.theme-toggle-checkbox:checked + .theme-toggle-switch .theme-toggle-sun {
    transform: translate(32px, -50%) scale(0.8);
    opacity: 0;
}

.theme-toggle-checkbox:checked + .theme-toggle-switch .theme-toggle-moon {
    transform: translate(32px, -50%) rotate(180deg);
    opacity: 1;
}

.theme-toggle-checkbox:checked + .theme-toggle-switch::after {
    transform: translateY(40%);
    opacity: 0;
}

.theme-toggle-checkbox:checked + .theme-toggle-switch .theme-toggle-stars {
    opacity: 1;
    transform: translateY(0);
}

/* Focus states for accessibility */
.theme-toggle-checkbox:focus + .theme-toggle-switch {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Hover effect */
.theme-toggle-switch:hover {
    transform: scale(1.05);
}