/// If true, include system dark mode
/// @access public
/// @type Bool
/// @group config
$system-dark-mode: true !default;
$feature-next: true !default;
@use './dist/themes' as tm;

@mixin generate-css-variables($map) {
    @each $name, $color in $map {
        --msk-#{$name}: #{$color};
    }
}

// dark theme css variables
@mixin system-dark-mode {
    :root {
        @media (prefers-color-scheme: dark) {
            @include generate-css-variables(tm.$theme-dark);
        }
    }
}
// light theme css variables used for both scss and css

@mixin theme {
    :root,
    .msk-theme--light {
        @include generate-css-variables(tm.$theme-light);
    }

    .msk-theme--dark {
        @include generate-css-variables(tm.$theme-dark);
    }

    @if $system-dark-mode == true {
        @include system-dark-mode;
    }
}

@mixin theme-next {
    :root {
        @include generate-css-variables(tm.$theme-light);
    }

    [data-theme='dark'] {
        @include generate-css-variables(tm.$theme-dark);
    }

    [data-theme='light'] {
        @include generate-css-variables(tm.$theme-light);
    }

    [data-theme='system'] {
        @media (prefers-color-scheme: dark) {
            @include generate-css-variables(tm.$theme-dark);
        }

        @media (prefers-color-scheme: light) {
            @include generate-css-variables(tm.$theme-light);
        }
    }
}

@if $feature-next == true {
    @include theme-next;
} @else {
    @include theme;
}