/*------------------------------------*\
  	#Mixin - Media queries
\*------------------------------------*/
// For min-width
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
@mixin amadeusHosResWcMediaBreakpointUp($point) {
    // Small devices (landscape phones, 576px and up)
    $media-breakpoint-up-sm: "(min-width: 576px)";

    // Medium devices (tablets, 768px and up)
    $media-breakpoint-up-md: "(min-width: 768px)";

    // Large devices (desktops, 992px and up)
    $media-breakpoint-up-lg: "(min-width: 992px)";

    // Extra large devices (large desktops, 1200px and up)
    $media-breakpoint-up-xl: "(min-width: 1200px)";

    @if $point==xl {
        @media #{$media-breakpoint-up-xl} {
            @content;
        }
    } @else if $point==lg {
        @media #{$media-breakpoint-up-lg} {
            @content;
        }
    } @else if $point==md {
        @media #{$media-breakpoint-up-md} {
            @content;
        }
    } @else if $point==sm {
        @media #{$media-breakpoint-up-sm} {
            @content;
        }
    }
}

// For max-width
@mixin amadeusHosResWcMediaBreakpointDown($point) {
    // Extra small devices (portrait phones, less than 576px)
    $media-breakpoint-down-xs: "(max-width: 575.98px)";

    // Small devices (landscape phones, less than 768px)
    $media-breakpoint-down-sm: "(max-width: 767.98px)";

    // Medium devices (tablets, less than 992px)
    $media-breakpoint-down-md: "(max-width: 991.98px)";

    // Large devices (desktops, less than 1200px)
    $media-breakpoint-down-lg: "(max-width: 1199.98px)";

    // Extra large devices (large desktops)
    // No media query since the extra-large breakpoint has no upper bound on its width

    @if $point==lg {
        @media #{$media-breakpoint-down-lg} {
            @content;
        }
    } @else if $point==md {
        @media #{$media-breakpoint-down-md} {
            @content;
        }
    } @else if $point==sm {
        @media #{$media-breakpoint-down-sm} {
            @content;
        }
    } @else if $point==xs {
        @media #{$media-breakpoint-down-xs} {
            @content;
        }
    }
}

// Between min-width and max-width
@mixin amadeusHosResWcMediaBreakpointOnly($point) {
    // Extra small devices (portrait phones, less than 576px)
    $media-breakpoint-only-xs: "(max-width: 575.98px)";

    // Small devices (landscape phones, 576px and up)
    $media-breakpoint-only-sm: "(min-width: 576px) and (max-width: 767.98px)";

    // Medium devices (tablets, 768px and up)
    $media-breakpoint-only-md: "(min-width: 768px) and (max-width: 991.98px)";

    // Large devices (desktops, 992px and up)
    $media-breakpoint-only-lg: "(min-width: 992px) and (max-width: 1199.98px)";

    // Extra large devices (large desktops, 1200px and up)
    $media-breakpoint-only-xl: "(min-width: 1200px)";

    // Extra large devices (large desktops)
    // No media query since the extra-large breakpoint has no upper bound on its width

    @if $point==xl {
        @media #{$media-breakpoint-only-xl} {
            @content;
        }
    } @else if $point==lg {
        @media #{$media-breakpoint-only-lg} {
            @content;
        }
    } @else if $point==md {
        @media #{$media-breakpoint-only-md} {
            @content;
        }
    } @else if $point==sm {
        @media #{$media-breakpoint-only-sm} {
            @content;
        }
    } @else if $point==xs {
        @media #{$media-breakpoint-only-xs} {
            @content;
        }
    }
}

// Between specific min-width and max-width
@mixin amadeusHosResWcMediaBreakpointBetween($min-point, $max-point) {
    // Apply styles starting from medium devices and up to extra large devices
    $media-breakpoint-between-min: "(min-width: 768px)";
    $media-breakpoint-between-max: "(max-width: 1199.98px)";

    @if $min-point==md and $max-point==xl {
        @media #{$media-breakpoint-between-min} and #{$media-breakpoint-between-max} {
            @content;
        }
    }
}

// Custom media query mixin for devices with max-width: 1366px
@mixin amadeusHosResWcMediaBreakpointDown1366($point) {
    // Devices (portrait phones, less than 1366px)
    $media-breakpoint-down-1366: "(max-width: 1366px)";

    @if $point==1366px {
        @media #{$media-breakpoint-down-1366} {
            @content;
        }
    }
}

// Custom media query mixin for devices with max-width: 350px
@mixin amadeusHosResWcMediaBreakpointDown350($point) {
    // Extra small devices (portrait phones, less than 350px)
    $media-breakpoint-down-350: "(max-width: 350px)";

    @if $point==350px {
        @media #{$media-breakpoint-down-350} {
            @content;
        }
    }
}