@import "../variables";

/*
    MEDIA QUERY

    Usage: @include mq(sm) {}
*/
@mixin mq($mq) {
    @if map-has-key($media-queries, $mq) {
        $mq-value: map-get($media-queries, $mq);

        @if ($mq-value == light or $mq-value == dark) {
            @media screen and (prefers-color-scheme: $mq-value) {
                @content;
            }
        } @else if ($mq-value == print) {
            @media print {
                @content;
            }
        } @else {
            @media screen and (max-width: ($mq-value - 1)) {
                @content;
            }
        }
    } @else {
        @error "Invalid media query: '#{$mq}'.";
    }
}