@use 'mixins' as *;

@layer layout {
	:root {
		--breakpoint-sm: #{$breakpoint-sm};
		--breakpoint-md: #{$breakpoint-md};
		--breakpoint-lg: #{$breakpoint-lg};
		--breakpoint-xl: #{$breakpoint-xl};
	}

	/* Hide on specific breakpoints */
	.l-hide-sm {
		@include max-width($breakpoint-sm) {
			display: none !important;
		}
	}

	.l-hide-md {
		@include max-width($breakpoint-md) {
			display: none !important;
		}
	}

	.l-hide-lg {
		@include max-width($breakpoint-lg) {
			display: none !important;
		}
	}

	.l-hide-xl {
		@include max-width($breakpoint-xl) {
			display: none !important;
		}
	}

	/* Show only on specific breakpoint ranges */
	.l-show-sm-only {
		@media not all and (max-width: calc(#{$breakpoint-sm} - 1px)),
			   not all and (min-width: #{$breakpoint-md}) {
			display: none !important;
		}
	}

	.l-show-md-only {
		@media not all and (min-width: #{$breakpoint-md}),
			   not all and (max-width: calc(#{$breakpoint-lg} - 1px)) {
			display: none !important;
		}
	}

	.l-show-lg-only {
		@media not all and (min-width: #{$breakpoint-lg}),
			   not all and (max-width: calc(#{$breakpoint-xl} - 1px)) {
			display: none !important;
		}
	}

	.l-show-xl-only {
		@media not all and (min-width: #{$breakpoint-xl}) {
			display: none !important;
		}
	}

	/* Common mobile/desktop helpers */
	.l-hide-mobile {
		@include mobile {
			display: none !important;
		}
	}

	.l-hide-desktop {
		@include desktop {
			display: none !important;
		}
	}

	.l-show-mobile-only {
		@include desktop {
			display: none !important;
		}
	}

	.l-show-desktop-only {
		@include mobile {
			display: none !important;
		}
	}
}
