@use 'sass:map';
@use 'sass:string';
@use 'sass:math';
@use '../../base/maps/tokens' as *;

/* Breakpoints mixin */
@mixin min-mobile {
	@media (min-width: string.unquote('#{(map.get($brandui-device-breakpoints-new, mobile, value) + 1)}px')) {
		@content;
	}
}

@mixin max-mobile {
	@media (max-width: string.unquote('#{(map.get($brandui-device-breakpoints-new, mobile, value))}px')) {
		@content;
	}
}

@mixin min-tablet {
	@media (min-width: string.unquote('#{(map.get($brandui-device-breakpoints-new, tablet, value) + 1)}px')) {
		@content;
	}
}

@mixin max-tablet {
	@media (max-width: string.unquote('#{(map.get($brandui-device-breakpoints-new, tablet, value))}px')) {
		@content;
	}
}

@mixin min-desktop {
	@media (min-width: string.unquote('#{(map.get($brandui-device-breakpoints-new, tablet, value) + 1)}px')) {
		@content;
	}
}

@mixin max-container-1 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 1}) {
		@content;
	}
}

@mixin max-container-2 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 2}) {
		@content;
	}
}

@mixin max-container-3 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 3}) {
		@content;
	}
}

@mixin max-container-4 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 4}) {
		@content;
	}
}

@mixin max-container-5 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 5}) {
		@content;
	}
}

@mixin max-container-6 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 6}) {
		@content;
	}
}

@mixin max-container-7 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 7}) {
		@content;
	}
}

@mixin max-container-8 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 8}) {
		@content;
	}
}

@mixin max-container-9 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 9}) {
		@content;
	}
}

@mixin max-container-10 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 10}) {
		@content;
	}
}

@mixin max-container-11 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 11}) {
		@content;
	}
}

@mixin max-container-12 {
	@container (max-width: #{math.div($brandui-content-max, 12) * 12}) {
		@content;
	}
}