@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

		// Box Shadow
		.#{$device-prefix}shadow-outline,
		.#{$device-prefix}hover\:shadow-outline:hover,
		.#{$device-prefix}focus\:shadow-outline:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-outline,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-outline {
			box-shadow: var(--shadow-outline);
		}

		.#{$device-prefix}shadow-outline-inset,
		.#{$device-prefix}hover\:shadow-outline-inset:hover,
		.#{$device-prefix}focus\:shadow-outline-inset:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-outline-inset,
		.#{$device-prefix}group:focus-within
			.group-focus-within\:shadow-outline-inset {
			box-shadow: inset var(--shadow-outline);
		}

		.#{$device-prefix}shadow-faint,
		.#{$device-prefix}hover\:shadow-faint:hover,
		.#{$device-prefix}focus\:shadow-faint:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-faint,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-faint {
			box-shadow: var(--shadow-faint);
		}

		.#{$device-prefix}shadow-faint-inset,
		.#{$device-prefix}hover\:shadow-faint-inset:hover,
		.#{$device-prefix}focus\:shadow-faint-inset:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-faint-inset,
		.#{$device-prefix}group:focus-within
			.group-focus-within\:shadow-faint-inset {
			box-shadow: inset var(--shadow-faint);
		}

		.#{$device-prefix}shadow-near,
		.#{$device-prefix}hover\:shadow-near:hover,
		.#{$device-prefix}focus\:shadow-near:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-near,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-near {
			box-shadow: var(--shadow-near);
		}

		.#{$device-prefix}shadow-near-inset,
		.#{$device-prefix}hover\:shadow-near-inset:hover,
		.#{$device-prefix}focus\:shadow-near-inset:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-near-inset,
		.#{$device-prefix}group:focus-within
			.group-focus-within\:shadow-near-inset {
			box-shadow: inset var(--shadow-near);
		}

		.#{$device-prefix}shadow-mid,
		.#{$device-prefix}hover\:shadow-mid:hover,
		.#{$device-prefix}focus\:shadow-mid:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-mid,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-mid {
			box-shadow: var(--shadow-mid);
		}

		.#{$device-prefix}shadow-mid-inset,
		.#{$device-prefix}hover\:shadow-mid-inset:hover,
		.#{$device-prefix}focus\:shadow-mid-inset:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-mid-inset,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-mid-inset {
			box-shadow: inset var(--shadow-mid);
		}

		.#{$device-prefix}shadow-far,
		.#{$device-prefix}hover\:shadow-far:hover,
		.#{$device-prefix}focus\:shadow-far:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-far,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-far {
			box-shadow: var(--shadow-far);
		}

		.#{$device-prefix}shadow-far-inset,
		.#{$device-prefix}hover\:shadow-far-inset:hover,
		.#{$device-prefix}focus\:shadow-far-inset:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-far-inset,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-far-inset {
			box-shadow: inset var(--shadow-far);
		}

		.#{$device-prefix}shadow-none,
		.#{$device-prefix}hover\:shadow-none:hover,
		.#{$device-prefix}focus\:shadow-none:focus,
		.#{$device-prefix}group:hover .group-hover\:shadow-none,
		.#{$device-prefix}group:focus-within .group-focus-within\:shadow-none {
			box-shadow: none;
		}

		// Device Breakpoints End
	}
}