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

/* Theme toggle button */
.theme-toggle {
    --size: 18px;
    --icon-fill: var(--text);
    --icon-fill-hover: var(--text);
    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;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.theme-toggle > svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-linecap: round;
    color: var(--text);
}

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

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

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

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

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

[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 {
        transform: translateX(0);
        cx: 17;
    }
}

@media (hover: none) {
    .theme-toggle {
        --size: 18px;
    }
}

/* Transitions */
.theme-toggle > .sun-and-moon > .sun {
    transition: transform 0.5s var(--ease-elastic-3);
}

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

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

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

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

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

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

.theme-toggle--toggling {
    animation: toggleScale 0.5s ease;
}

@keyframes toggleScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.9); }
}