_mixins.scss

// ============================================================================================= //
//                                            MIXINS                                             //
// ============================================================================================= //

@use "sass:string";
@use "./functions";

@mixin breakpoint($min-width: false, $max-width: false, $root-selector: false) {

    @if $root-selector and (string.slice($root-selector, 1, 1) != ".") and (string.slice($root-selector, 1, 1) != "#") {
        @error "The \"#{$root-selector}\" selector need to be ID or class.";
    }

    @if $min-width {
        @if $max-width {
            @media all and (min-width: functions.set-value($min-width)) and (max-width: functions.set-value-has-strict($max-width)) {
                @if $root-selector {
                    #{$root-selector} & {
                        @content;
                    }
                } @else {
                    @content;
                }
            }
        } @else {
            @media all and (min-width: functions.set-value($min-width)) {
                @if $root-selector {
                    #{$root-selector} & {
                        @content;
                    }
                } @else {
                    @content;
                }
            }
        }
    } @else if $max-width {
        @media all and (max-width: functions.set-value-has-strict($max-width)) {
            @if $root-selector {
                #{$root-selector} & {
                    @content;
                }
            } @else {
                @content;
            }
        }
    }
}