@use "sass:list";

/* Breakpoint Block Styles */
.wp-block-orphic-ui-breakpoint {
	display: block;
	width: 100%;
}

/* Liste des valeurs de breakpoint possibles */
$breakpoint-values: 600, 650, 700, 750, 768, 800, 850, 900, 950, 1000, 1024,
	1100, 1200, 1300, 1400;

/* Classes Desktop (visible seulement à partir du breakpoint exact) */
@each $bp in $breakpoint-values {
	.orphic-ui-breakpoint-desktop-#{$bp} {
		@media (max-width: #{$bp - 0.02}px) {
			display: none;
		}
	}
}

/* Classes Mobile (visible seulement jusqu'au breakpoint, non inclus) */
@each $bp in $breakpoint-values {
	.orphic-ui-breakpoint-mobile-#{$bp} {
		@media (min-width: #{$bp}px) {
			display: none;
		}
	}
}

/* Classes Tablet (visible seulement entre deux breakpoints) */
/* On génère seulement quelques combinaisons courantes pour éviter trop de CSS */
$min-breakpoints: 600, 650, 700, 750, 768, 800, 850, 950, 1000;
$max-breakpoints: 800, 850, 900, 950, 1000, 1024, 1100, 1200, 1300, 1400;

@each $min in $min-breakpoints {
	@each $max in $max-breakpoints {
		@if $min < $max {
			.orphic-ui-breakpoint-tablet-#{$min}-#{$max} {
				$min_value: $min - 1;
				@media (max-width: #{$min_value}px), (min-width: #{$max}px) {
					display: none;
				}
			}
		}
	}
}
