/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

@use "sass:list";

.wp-block-orphic-ui-spacer-responsive {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

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

/* Classes de base */
.orphic-ui-spacer-responsive-desktop,
.orphic-ui-spacer-responsive-tablet,
.orphic-ui-spacer-responsive-mobile {
	width: 100%;
}

/* Génération des classes pour Desktop */
@each $bp in $breakpoint-values {
	.orphic-ui-spacer-responsive-desktop.desktop-#{$bp} {
		display: block;
		@media (max-width: #{$bp - 0.02}px) {
			display: none;
		}
	}
}

/* Génération des classes pour Mobile */
@each $bp in $breakpoint-values {
	.orphic-ui-spacer-responsive-mobile.mobile-#{$bp} {
		display: none;
		@media (max-width: #{$bp - 0.02}px) {
			display: block;
		}
	}
}

/* Génération des classes pour Tablet */
$min-breakpoints: 600, 650, 700, 750, 768, 800, 850, 900;
$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-spacer-responsive-tablet.tablet-#{$min}-#{$max} {
				display: none;
				@media (min-width: #{$min}px) and (max-width: #{$max - 0.02}px) {
					display: block;
				}
			}
		}
	}
}
