@use '../01-settings/variables' as vars;
// ------------------------------------------------------
// Media queries
// ------------------------------------------------------
// |-- Min width
@mixin xxs-wmin {
    @media (min-width: #{vars.$screen-2xs-wmin}) {
        @content; // 375px
    }
}

@mixin xs-wmin {
    @media (min-width: #{vars.$screen-xs-wmin}) {
        @content; // 470px
    }
}

@mixin sm-wmin {
    @media (min-width: #{vars.$screen-sm-wmin}) {
        @content; // 576px
    }
}

@mixin md-wmin {
    @media (min-width: #{vars.$screen-md-wmin}) {
        @content; // 768px
    }
}

@mixin mdl-wmin {
    @media (min-width: #{vars.$screen-mdl-wmin}) {
        @content; // 840px
    }
}

@mixin lg-wmin {
    @media (min-width: #{vars.$screen-lg-wmin}) {
        @content; // 992px
    }
}

@mixin xl-wmin {
    @media (min-width: #{vars.$screen-xl-wmin}) {
        @content; // 1200px
    }
}

@mixin xxl-wmin {
    @media (min-width: #{vars.$screen-2xl-wmin}) {
        @content; // 1400px
    }
}

@mixin xxxl-wmin {
    @media (min-width: #{vars.$screen-3xl-wmin}) {
        @content; // 1600px
    }
}

@mixin xxxxl-wmin {
    @media (min-width: #{vars.$screen-4xl-wmin}) {
        @content; // 1800px
    }
}

@mixin xxxxxl-wmin {
    @media (min-width: #{vars.$screen-5xl-wmin}) {
        @content; // 1930px
    }
}

// |-- Max width
@mixin xxs-wmax {
    @media (max-width: #{vars.$screen-2xs-wmax}) {
        @content; // 374.98px
    }
}

@mixin xs-wmax {
    @media (max-width: #{vars.$screen-xs-wmax}) {
        @content; // 469.98px
    }
}

@mixin sm-wmax {
    @media (max-width: #{vars.$screen-sm-wmax}) {
        @content; // 575.98px
    }
}

@mixin md-wmax {
    @media (max-width: #{vars.$screen-md-wmax}) {
        @content; // 767.98px
    }
}

@mixin mdl-wmax {
    @media (max-width: #{vars.$screen-mdl-wmax}) {
        @content; // 839.98px
    }
}

@mixin lg-wmax {
    @media (max-width: #{vars.$screen-lg-wmax}) {
        @content; // 991.98px
    }
}

@mixin xl-wmax {
    @media (max-width: #{vars.$screen-xl-wmax}) {
        @content; // 1199.98px
    }
}

@mixin xxl-wmax {
    @media (max-width: #{vars.$screen-2xl-wmax}) {
        @content; // 1399.98px
    }
}

@mixin xxxl-wmax {
    @media (max-width: #{vars.$screen-3xl-wmax}) {
        @content; // 1599.98px
    }
}

@mixin xxxxl-wmax {
    @media (max-width: #{vars.$screen-4xl-wmax}) {
        @content; // 1799.98px
    }
}

@mixin xxxxxl-wmax {
    @media (max-width: #{vars.$screen-5xl-wmax}) {
        @content; // 1929.98px
    }
}