/* Container */
.switchicon-container {
    position: relative;
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base SVG positioning */
#bdmSun,
#bdmMoon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Sizes + colors */
#bdmSun {
    width: 35px;
    height: 35px;
    fill: gold;
    opacity: 0; /* hidden in light mode */
}

#bdmMoon {
    width: 30px;
    height: 30px;
    fill: white;
    opacity: 1; /* visible in light mode */
}

/* Dark mode visibility (swapped) */
.bdm-dark-mode #bdmSun {
    opacity: 1;
}

.bdm-dark-mode #bdmMoon {
    opacity: 0;
}

/* ========================= */
/* Spin Animations */
/* ========================= */

/* Moon full 360° */
@keyframes bdm-spin-moon {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Sun softer 180° */
@keyframes bdm-spin-sun {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(180deg);
    }
}

.bdm-spin-moon {
    animation: bdm-spin-moon 0.6s ease-in-out;
}

.bdm-spin-sun {
    animation: bdm-spin-sun 0.6s ease-in-out;
}