_main.scss

// Initialise config

@mixin windbreakercss($config) {

    // Variables

    $separator: map-get($config, separator);
    $utilities: map-get($config, utilities);
    $breakpoints: map-get($config, breakpoints);

    // Go through all the utilities and generate classes

    @each $key, $utility in $utilities {
        @include windbreakercss-utility($utility, $separator);
        @if type-of($breakpoints) == 'map' and map-get($utility, responsive) == true {
            @each $bp, $size in $breakpoints {
                @media screen and (min-width: $size) {
                    @include windbreakercss-utility($utility, $separator, $bp);
                }
            }
        }
    }

}

// Output the css

@mixin windbreakercss-output($selector, $property, $value, $important: false) {
    $important-value: '';
    @if $important == true {
        $important-value: ' !important';
    }
    #{$selector} {
        @if type-of($value) == 'map' {
            @each $p, $v in $value {
                @if type-of($v) == 'string' {
                    #{$p}: #{unquote($v) + $important-value};
                } @else {
                    #{$p}: #{$v + $important-value};
                }
            }
        } @else if type-of($value) == 'string' {
            #{$property}: #{unquote($value) + $important-value};
        } @else {
            #{$property}: #{$value + $important-value};
        }
    }
}

// Create utility

@mixin windbreakercss-utility($config, $separator, $key: '') {

    // Variables

    $prefix: map-get($config, prefix);
    $dark-mode: map-get($config, dark-mode);
    $group: map-get($config, group);
    $property: map-get($config, property);
    $states: map-get($config, states);

    // Create the prefix

    @if $key != '' {
        $key: $separator + $key;
    }

    // Go through each value

    @each $name, $value in map-get($config, values) {

        // Create the standard classes

        $selector: '.' + $prefix + $name + $key;

        // Add state classes

        @if type-of($states) == 'list' {
            @each $state in $states {
                $selector: $selector + ', .' + $state + $separator + $prefix + $name + $key + ':' + $state;
            }
        } @else if type-of($states) == 'string' {
            $selector: $selector + ', .' + $states + $separator + $prefix + $name + $key + ':' + $states;
        }

        // Add group classes

        @if type-of($group) == 'list' {
            @each $state in $group {
                $selector: $selector + ', .group:' + $state + ' .group' + $separator + $state + $separator + $prefix + $name + $key;
            }
        } @else if type-of($group) == 'string' {
            $selector: $selector + ', .group:' + $group + ' .group' + $separator + $group + $separator + $prefix + $name + $key;
        }

        @include windbreakercss-output($selector, $property, $value);

        // Add dark classes

        @if $dark-mode == true {

            // Add standard class

            $selector: '.dark .' + $prefix + $name + $separator + 'dark' + $key;

            // Add state classes

            @if type-of($states) == 'list' {
                @each $state in $states {
                    $selector: $selector + ', .dark .' + $state + $separator + $prefix + $name + $separator + 'dark' + $key + ':' + $state;
                }
            } @else if type-of($states) == 'string' {
                $selector: $selector + ', .dark .' + $states + $separator + $prefix + $name + $separator + 'dark' + $key + ':' + $states;
            }

            // Add group classes 

            @if type-of($group) == 'list' {
                @each $state in $group {
                    $selector: $selector + ', .dark .group:' + $state + ' .group' + $separator + $state + $separator + $prefix + $name + $separator + 'dark' + $key;
                }
            } @else if type-of($group) == 'string' {
                $selector: $selector + ', .dark .group:' + $group + ' .group' + $separator + $group + $separator + $prefix + $name + $separator + 'dark' + $key;
            }
            
            @include windbreakercss-output($selector, $property, $value, true);

        }

    }

}