@mixin hover_touch {
	@media (hover: hover) and (pointer: fine) {
		&:hover {
			@content;
		}
	}

	@media (hover: none) and (pointer: coarse) {
		&:active {
			@content;
		}
	}
}

// =========================
// Breakpoints
// =========================

$breakpoints: (
  xs: 360px,
  sm: 480px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1440px
);

@function bp($key) {
  @if map-has-key($breakpoints, $key) {
    @return map-get($breakpoints, $key);
  }

  @error "Breakpoint `#{$key}` not found. Available: #{map-keys($breakpoints)}";
}

@mixin media_up($key) {
  @media (min-width: bp($key)) {
    @content;
  }
}

@mixin media_down($key) {
  @media (max-width: (bp($key) - 1px)) {
    @content;
  }
}

@mixin media_between($from, $to) {
  @media (min-width: bp($from)) and (max-width: (bp($to) - 1px)) {
    @content;
  }
}