//
//    Your custom theme will merge with default reterial theme.
//
//    Eample: --reterial-primary-color: RETERIAL-BLUE-500;
//
@mixin _ReterialThemeColorVariables($theme) {
    @each $key, $value in $theme {
        --ret-theme-#{$key}-color: #{$value};
    }
}

//
//    It makes a reterial theme and make access with body element with reterial-theme tag on it.
//
//    Example:
//        body[reterial-theme="default-light"]:root {
//            --reterial-primary-color: RETERIAL-BLUE-500;
//        }
//
@mixin ReterialTheme($name, $theme: ()) {
    body[reterial-theme="#{$name}"] {
        background-color: var(--ret-theme-body-color);
    }

    body[reterial-theme="#{$name}"] {
        @include _ReterialThemeColorVariables($theme);
    }
}