@import './_breakpoints.scss';

/*
* media-breakpoint-only
*
* xs    sm    md    lg    xl
* |-----|-----|-----|-----|-----∞
*
* |-xs--|
*       |-sm--|
*             |-md--|
*                   |-lg--|
*                         |-xl-----∞
*
* The xl mixin targets sizes from xl and upwards,
* if an xxl breakpoint would be added in the future
* then the xl breakpoint would stop just before the xxl breakpoint.
*/

@mixin xs {
    @include media-breakpoint-only('xs') {
        @content;
    }
}

@mixin sm {
    @include media-breakpoint-only('sm') {
        @content;
    }
}

@mixin md {
    @include media-breakpoint-only('md') {
        @content;
    }
}

@mixin lg {
    @include media-breakpoint-only('lg') {
        @content;
    }
}

@mixin xl {
    @include media-breakpoint-only('xl') {
        @content;
    }
}

/*
* media-breakpoint-up
*
* xs    sm    md    lg    xl
* |-----|-----|-----|-----|-----∞
*
*       |-- sm-up -----------------------∞
*             |-- md-up -----------------∞
*                   |-- lg-up -----------∞
*                         |-- xl-up -----∞
*
* There's no need to add xs-up, that's the same as not applying
* any media query at all.
*
* The xl-up mixin produces the same result as the xl mixin as of
* the current implementation because xl is the highest named breakpoint,
* that would change however if say an xxl breakpoint was added to the breakpoints,
* then the xl and xl-up mixins would differ, xl would only target sizes up to xxl
* so keep that in mind when using these, if you want to future proof that you always
* want to target sizes from xl and upwards use xl-up.
*/

@mixin sm-up {
    @include media-breakpoint-up('sm') {
        @content;
    }
}

@mixin md-up {
    @include media-breakpoint-up('md') {
        @content;
    }
}

@mixin lg-up {
    @include media-breakpoint-up('lg') {
        @content;
    }
}

@mixin xl-up {
    @include media-breakpoint-up('xl') {
        @content;
    }
}

/*
* media-breakpoint-down
*
* xs    sm    md    lg    xl
* |-----|-----|-----|-----|-----∞
*
* sm-down
* |-----|
* |-- md-down-|
* |-------- lg-down-|
* |-------------- xl-down-|
*
* There's no need to add xs-down, that's the same as not applying
* any media query at all.
*
* As of the current implementation, the xs mixin and the sm-down
* mixin produces the same result, if in the future a breakpoint
* were to be added between the xs and sm breakpoints then the xs
* and sm-down mixins would differ in their result.
* If you want to make sure that you target screen sizes from
* the sm breakpoint and downwards, use the sm-down mixin, if you just
* want to target from xs and up to the next breakpoint, use the xs mixin.
*/

@mixin sm-down {
    @include media-breakpoint-down('sm') {
        @content;
    }
}

@mixin md-down {
    @include media-breakpoint-down('md') {
        @content;
    }
}

@mixin lg-down {
    @include media-breakpoint-down('lg') {
        @content;
    }
}

@mixin xl-down {
    @include media-breakpoint-down('xl') {
        @content;
    }
}

@mixin three-sixty-down {
    @media (max-width: 359px) {
        @content;
    }
}

/*
* media-breakpoint-between
*
* xs    sm    md    lg    xl
* |-----|-----|-----|-----|-----∞
*
*       |-- sm-lg --|
*       |----- sm-xl -----|
*             |-- md-xl --|
*
* There's no need to add a 'between' mixin between 2 consecutive breakpoints
* e.g. md-lg, in this case that would result in the same media query that
* the 'md' mixin (media-breakpoint-only('md')) produces.
*
* There's no need to add a 'between' mixin from xs to any breakpoint, you get the same
* result when using one of the 'down' mixins
*/

@mixin sm-lg {
    @include media-breakpoint-between('sm', 'lg') {
        @content;
    }
}

@mixin sm-xl {
    @include media-breakpoint-between('sm', 'xl') {
        @content;
    }
}

@mixin md-xl {
    @include media-breakpoint-between('md', 'xl') {
        @content;
    }
}

/**
 * Used to detect devices where touch is the main input
**/
@mixin touch() {
    @media (pointer: coarse) {
        @content;
    }
}

/**
 * Used to detect devices where some fine control is available
**/
@mixin any-pointer-fine() {
    @media (any-pointer: fine) {
        @content;
    }
}

/**
 * Used to detect devices where no fine control is available
**/
@mixin no-pointer-fine() {
    @media not (any-pointer: fine) {
        @content;
    }
}

/**
 * Used to detect forced colors mode, e.g. Windows Contrast Themes.
 * In this mode the user agent strips author backgrounds, box-shadows and
 * colors, so borders/outlines have to be restored with system color keywords
 * (Canvas, CanvasText, ButtonText, Highlight, GrayText).
**/
@mixin forced-colors() {
    @media (forced-colors: active) {
        @content;
    }
}

@mixin mobile-portrait() {
    @include portrait {
        @include lg-down {
            @include touch {
                @content;
            }
        }
    }
}

@mixin mobile-landscape {
    @include landscape {
        @include lg-down {
            @include touch {
                @content;
            }
        }
    }
}

@mixin mobile() {
    @include mobile-portrait() {
        @content;
    }
    @include mobile-landscape() {
        @content;
    }
}

/**
 * Used to detect tablet devices in portrait and landscape mode
**/
@mixin tablet() {
    @include md-up {
        @include touch {
            @content;
        }
    }
}

@mixin portrait {
    @media (orientation: portrait) {
        @content;
    }
}

@mixin landscape {
    @media (orientation: landscape) {
        @content;
    }
}