@use 'sass:map';

@mixin respond-to($breakpoint) {
	$breakpoint-map: (
		'sm': 640px,
		'md': 768px,
		'lg': 992px,
		'xl': 1200px
	);
	$value: map.get($breakpoint-map, $breakpoint);
	@if $value {
		@media (max-width: $value) {
			@content;
		}
	} @else {
		@warn "Unknown breakpoint: #{$breakpoint}.";
	}
}

@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

@mixin truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}