// This file contains responsive mixins based on Bootstrap 4 breakpoints.
// https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

// xs: 0-576    (mobile) (touch)
// sm: 576-768  (mobile) (touch)
// md: 768-992  (tablet) (touch)
// lg: 992-1200 (desktop)
// xl: 1200+    (widescreen) (desktop)

$breakpoints: (
	mobile: 768px,
	tablet: 1124px,
);

@mixin media($keys...) {
	@each $key in $keys {
		@media (max-width: map-get($breakpoints, $key)) {
			@content;
		}
	}
}

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

// between 768px and 992px, or md
@mixin tablet {
  @include media-breakpoint-only(md) {
    @content;
  }
}

// up to 576px, or xs
@mixin xs {
	@include media-breakpoint-down(xs) {
		@content;
	}
}

// between 576px and 992px
@mixin sm-md {
	@include media-breakpoint-between(sm, md) {
		@content;
	}
}

// mobile & tablet
// up to 992px, or xs + sm + md
@mixin touch {
	@include media-breakpoint-down(md) {
		@content;
	}
}

// greater than 992px, or lg + xl
@mixin desktop {
	@include media-breakpoint-up(lg) {
		@content;
	}
}

// greater than 1200px, or xl
@mixin widescreen {
	@include media-breakpoint-up(xl) {
		@content;
	}
}

// have property take on 2 different values depending on the view
@mixin responsive($property, $desktop, $touch) {
	@include desktop {
		#{$property}: $desktop;
	}

	@include touch {
		#{$property}: $touch;
	}
}
