@layer reset, theme, base, variables, helpers, utilities, demo.svg, demo.toggle-button, demo.icon, demo.support;

@layer variables {
    :root {
        --icon-fill: 42.76% 0.015 248.17;
        --icon-fill-hover: 26.21% 0.009 248.19;
        --_size: 3rem;
        --_padding: .3rem;
        --animation-duration: 0.5s;
        --ease-3: cubic-bezier(.25, 0, .3, 1);
    }
}

@layer theme {
    html {
        color-scheme: light;
    }

    html[data-theme="dark"] {
        color-scheme: dark;
    }

    @supports not (color-scheme: dark) {
        html[data-theme="dark"] {
            background-color: oklch(17.76% 0 0);
        }
    }
}

@layer helpers {
    .btn-reset {
        border: none;
        padding: 0;
        background-color: transparent;
        cursor: pointer;
    }
}

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

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

        & > .sun-beams {
            stroke: oklch(var(--icon-fill));
            stroke-width: .125rem;
        }
    }
}

@layer demo.toggle-button {
    .theme-toggle {
        block-size: var(--_size);
        inline-size: var(--_size);
        aspect-ratio: 1;
        padding: calc(var(--_padding) + 0.125rem);
        border-radius: 50%;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;

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

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

            .sun-and-moon > .sun-beams {
                stroke: oklch(var(--icon-fill-hover));
            }
        }

        @media (hover: none) {
            --_size: 3rem;
        }
    }

    [data-theme="dark"] .theme-toggle {
        --icon-fill: 76.26% 0.013 244.31;
        --icon-fill-hover: 92.27% 0.006 239.82;
    }

    @media (max-width: 600px) {
        .theme-toggle {
            --_size: 2.5rem;
            --_padding: .3rem;
        }
        [data-theme="dark"] .theme-toggle {
            --icon-fill: 92.27% 0.006 239.82;
            --icon-fill-hover: 98.27% 0.006 239.82;
        }
    }
}

@layer demo.icon {
    .icon-button {
        transition: outline-offset 145ms var(--ease-2), box-shadow .5s var(--ease-out-4), translate .3s var(--ease-3);
        transition-delay: 0s, 0s, .15s;

        &:hover:not(:active) {
            box-shadow: 0 0 5em oklch(55.66% 0.208 268.35);
        }
    }

    [data-theme="dark"] .icon-button {
        box-shadow: none;
    }
}

@layer demo.support {
    .sun-and-moon > .sun {
        transition: transform var(--animation-duration) var(--ease-3);
    }

    .sun-and-moon > .sun-beams {
        transition: transform var(--animation-duration) var(--ease-3), opacity var(--animation-duration) var(--ease-3);
    }

    .sun-and-moon .moon > circle {
        transition: transform var(--animation-duration) var(--ease-3);
    }

    @supports (cx: 1) {
        .sun-and-moon .moon > circle {
            transition: cx var(--animation-duration) var(--ease-3);
        }
    }

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

    [data-theme="dark"] .sun-and-moon > .sun-beams {
        opacity: 0;
        transform: rotate(-25deg);
    }

    [data-theme=dark] .sun-and-moon > .moon > circle {
        transform: translate(-7px);
    }

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

    @media (prefers-reduced-motion: no-preference) {
        /* Tutaj możesz dodać bardziej zaawansowane animacje, jeśli chcesz, ale podstawowa animacja działa już bez tego bloku */
    }
}