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

@each $device-key, $device-map in $brandui-device-breakpoints-new {
	$device-value: map.get($device-map, 'value');
	$device-prefix: map.get($device-map, 'prefix');

	@media (max-width: string.unquote('#{$device-value}px')) {
		// Device Breakpoints Start

		.#{$device-prefix}visibility-hidden {
			visibility: hidden;
		}

		.#{$device-prefix}visibility-visible {
			visibility: visible;
		}

		.#{$device-prefix}visibility-initial {
			visibility: initial;
		}
	}
}

.hide-on-mobile {
	display: block;

	@media (width <= 520px) {
		display: none;
	}
}

.show-on-mobile {
	display: none;

	@media (width <= 520px) {
		display: block;
	}
}