.sun-and-moon > .moon,
.sun-and-moon > .sun,
.sun-and-moon > .sun-beams {
    transform-origin: center center;
}
.sun-and-moon > .moon,
.sun-and-moon > .sun {
    fill: var(--icon-fill);
}
.theme-toggle:hover > .sun-and-moon > .moon,
.theme-toggle:focus-visible > .sun-and-moon > .moon,
.theme-toggle:hover > .sun-and-moon > .sun,
.theme-toggle:focus-visible > .sun-and-moon > .sun {
    fill: var(--icon-fill-hover);
}
.sun-and-moon > .sun-beams {
    stroke: var(--icon-fill);
    stroke-width: 2px;
}
.theme-toggle:hover > .sun-and-moon > .sun-beams,
.theme-toggle:focus-visible > .sun-and-moon > .sun-beams {
    stroke: var(--icon-fill-hover);
}
/* Dark mode transformations */
[data-theme="dark"] .sun-and-moon > .sun {
    transform: scale(1.75);
}
[data-theme="dark"] .sun-and-moon > .sun-beams {
    opacity: 0;
}
[data-theme="dark"] .sun-and-moon > .moon > circle {
    transform: translateX(-7px);
}
/* Animations and transitions */
.sun-and-moon > .sun {
    transition: transform 0.5s ease-out;
}
.sun-and-moon > .sun-beams {
    transition: 
        transform 0.5s ease-out,
        opacity 0.5s ease-out;
}
.sun-and-moon > .moon > circle {
    transition: transform 0.25s ease-out;
}
[data-theme="dark"] .sun-and-moon > .sun {
    transform: scale(1.75);
    transition-timing-function: ease-out;
    transition-duration: 0.25s;
}
[data-theme="dark"] .sun-and-moon > .sun-beams {
    transform: rotateZ(-25deg);
    transition-duration: 0.15s;
}
[data-theme="dark"] .sun-and-moon > .moon > circle {
    transition-delay: 0.25s;
    transition-duration: 0.5s;
}