@use 'variables';

@layer flux-base {
    :root {
        @include variables.animation;
        @include variables.defaults;
    }

    :root, [light] {
        @include variables.color-light;
        @include variables.shadow-light;
    }

    [dark] {
        @include variables.defaults-dark;
        @include variables.color-dark;
        @include variables.shadow-dark;
    }

    html {
        font-size: var(--font-size-default);
    }

    body {
        background: var(--background);
        font-family: var(--font-sans), system-ui;
        line-height: var(--line-height-default);
    }

    body, dialog {
        color: var(--foreground);
    }

    [inert] *::-webkit-scrollbar {
        display: none;
    }
}