@import "sun-and-moon.css";


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

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

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

.theme-toggle:is(:hover, :focus-visible)>.sun-and-moon> :is(.moon, .sun) {
    fill: var(--icon-fill-hover);
}

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

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon>.sun-beams {
    stroke: var(--icon-fill-hover);
}

[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);
}

@supports (cx: 1) {
    [data-theme="dark"] .sun-and-moon>.moon>circle {
        cx: 17;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon>.sun {
        transition: transform .5s var(--ease-elastic-3);
    }

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

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

    @supports (cx: 1) {
        .sun-and-moon .moon>circle {
            transition: cx .25s var(--ease-out-5);
        }
    }

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

    [data-theme="dark"] .sun-and-moon>.sun-beams {
        transition-duration: .15s;
        transform: rotateZ(-25deg);
    }

    [data-theme="dark"] .sun-and-moon>.moon>circle {
        transition-duration: .5s;
        transition-delay: .25s;
    }
}

.theme-toggle {
    --size: 2rem;
    --icon-fill: hsl(210 0% 30%);
    --icon-fill-hover: hsl(210 0% 15%);

    background: none;
    border: none;
    padding: 0;

    inline-size: var(--size);
    block-size: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;

    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    outline-offset: 5px;

    &>svg {
        inline-size: 100%;
        block-size: 100%;
        stroke-linecap: round;
    }

    [data-theme="dark"] & {
        --icon-fill: hsl(210 0% 70%);
        --icon-fill-hover: hsl(210 0% 90%);
    }

    @media (hover: none) {
        --size: 48px;
    }
}