@import "https://unpkg.com/open-props/easings.min.css";

.sun-and-moon {
    &> :is(.moon, .sun, .sun-beams) {
        transform-origin: center center;
    }

    &> :is(.moon, .sun) {
        fill: var(--icon-fill);

        @nest .theme-toggle:is(:hover, :focus-visible)>& {
            fill: var(--icon-fill-hover);
        }
    }

    &>.sun-beams {
        stroke: var(--icon-fill);
        stroke-width: 2px;

        @nest .theme-toggle:is(:hover, :focus-visible) & {
            stroke: var(--icon-fill-hover);
        }
    }

    @nest [data-theme="dark"] & {
        &>.sun {
            transform: scale(1.75);
        }

        &>.sun-beams {
            opacity: 0;
        }

        &>.moon>circle {
            transform: translateX(-7px);

            @supports (cx: 1px) {
                transform: translateX(0);
                cx: 17px;
            }
        }
    }

    @media (--motionOK) {
        &>.sun {
            transition: transform .5s var(--ease-elastic-3);
        }

        &>.sun-beams {
            transition:
                transform .5s var(--ease-elastic-4),
                opacity .5s var(--ease-3);
        }

        & .moon>circle {
            transition: transform .25s var(--ease-out-5);

            @supports (cx: 1px) {
                transition: cx .25s var(--ease-out-5);
            }
        }

        @nest [data-theme="dark"] & {
            &>.sun {
                transform: scale(1.75);
                transition-timing-function: var(--ease-3);
                transition-duration: .25s;
            }

            &>.sun-beams {
                transform: rotateZ(-25deg);
                transition-duration: .15s;
            }

            &>.moon>circle {
                transition-delay: .25s;
                transition-duration: .5s;
            }
        }
    }
}