@import './functions';

@mixin colorVariables($name, $scheme: light) {
    //base
    --color-#{'' + $name}: #{color($name, 'base', $scheme)};
    // rgb
    --color-#{'' + $name}-rgb: #{parseRgb(color($name, 'base', $scheme))};

    //contrast
    --color-#{'' + $name}-contrast: var(
        --color-#{opposed($name, $scheme)},
        #{color(opposed($name, $scheme), 'base', $scheme)}
    );
    //contrast rgb
    --color-#{'' + $name}-contrast-rgb: #{parseRgb(color(opposed($name, $scheme), 'base', $scheme))};
}

@mixin colorConfigVariables($name, $config: base, $scheme: light) {
    // variation
    --color-#{'' + $name}-#{'' + $config}: #{color($name, $config, $scheme)};
    // rgb
    --color-#{'' + $name}-#{'' + $config}-rgb: #{parseRgb(color($name, $config, $scheme))};

    //contrast
    --color-#{'' + $name}-#{'' + $config}-contrast: var(
        --color-#{'' + $name}-#{opposedConfig($config)},
        #{color($name, opposedConfig($config), $scheme)}
    );
    // contrast rgb
    --color-#{'' + $name}-#{'' + $config}-contrast-rgb: #{parseRgb(color($name, opposedConfig($config), $scheme))};
}

@mixin colorSteps($name, $scheme: light) {
    @for $index from 0 through 20 {
        $step: ($index) * 50;

        --color-#{'' + $name}-step-#{'' + $step}: #{stepped($index, $name, $scheme)};
    }
}

@mixin colorContent($name, $scheme: light) {
    //color
    @include colorVariables($name, $scheme);
    // steps
    @include colorSteps($name, $scheme);

    // configs
    @each $config, $value in $colors_config {
        @include colorConfigVariables($name, $config, $scheme);
    }
}

// root color variables
:root {
    @each $name, $color in $colors_base {
        @include colorContent($name);
    }
}
// media theme
@each $scheme, $variables in $colors_scheme {
    @media (prefers-color-scheme: #{$scheme}) {
        body {
            @each $name, $color in map-get($variables, 'colors') {
                @include colorContent($name, $scheme);
            }
        }
    }
}

// theme colors fallback
body {
    @each $scheme, $variables in $colors_scheme {
        &.#{$scheme} {
            @each $name, $color in map-get($variables, 'colors') {
                @include colorContent($name, $scheme);
            }
        }
    }
}

// schemes
@each $scheme, $variables in $colors_scheme {
    @media (prefers-color-scheme: #{$scheme}) {
        #prefers-color-scheme,
        meta[name='prefers-color-scheme'] {
            content: '#{$scheme}';
        }
    }
}
// colors classes
.color {
    @each $name, $color in $colors_base {
        &-#{'' + $name},
        &--#{'' + $name} {
            //base
            --color-base: var(--color-#{'' + $name}, #{color($name)}) !important;
            // rgb
            --color-base-rgb: var(--color-#{'' + $name}-rgb, #{parseRgb(color($name))}) !important;
            //contrast
            --color-contrast: var(
                --color-#{'' + $name}-contrast,
                var(--color-#{opposed($name)}, #{color(opposed($name))})
            ) !important;
            //contrast rgb
            --color-contrast-rgb: var(
                --color-#{'' + $name}-contrast-rgb,
                #{parseRgb(color(opposed($name)))}
            ) !important;

            @each $config, $value in $colors_config {
                --color-#{'' + $config}: var(
                    --color-#{'' + $name}-#{'' + $config},
                    #{color($name, $config)}
                ) !important;
            }
        }
    }
}