@use 'sass:map';
@use 'sass:string';
@use '../base/maps/tokens' as *;
@use '../base/functions' 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

		@for $i from 0 through 10 {
			.#{$device-prefix}opacity-#{$i},
			.#{$device-prefix}hover\:opacity-#{$i}:hover,
			.#{$device-prefix}focus\:opacity-#{$i}:focus,
			.#{$device-prefix}group:hover .group-hover\:opacity-#{$i},
			.#{$device-prefix}group:focus-within .group-focus-within\:opacity-#{$i} {
				opacity: 0.1 * $i;
			}

			@if $i != 10 {
				.#{$device-prefix}opacity-0#{$i},
				.#{$device-prefix}hover\:opacity-0#{$i}:hover,
				.#{$device-prefix}focus\:opacity-0#{$i}:focus,
				.#{$device-prefix}group:hover .group-hover\:opacity-0#{$i},
				.#{$device-prefix}group:focus-within
					.group-focus-within\:opacity-0#{$i} {
					opacity: 0.01 * $i;
				}
			}
		}

		// Element filter grayscale
		.#{$device-prefix}grayscale-full {
			filter: grayscale(1);
		}

		.#{$device-prefix}grayscale-none {
			filter: grayscale(0);
		}

		// Element filter blurs
		.#{$device-prefix}blur-small {
			filter: blur(0.625rem);
		}

		.#{$device-prefix}blur-medium {
			filter: blur(1.25rem);
		}

		.#{$device-prefix}blur-large {
			filter: blur(2.5rem);
		}

		.#{$device-prefix}blur-none {
			filter: blur(0);
		}

		// Backdrop filter blurs
		.#{$device-prefix}bg-blur-small {
			backdrop-filter: blur(0.625rem);
		}

		.#{$device-prefix}bg-blur-medium {
			backdrop-filter: blur(1.25rem);
		}

		.#{$device-prefix}bg-blur-large {
			backdrop-filter: blur(2.5rem);
		}

		.#{$device-prefix}bg-blur-none {
			backdrop-filter: blur(0);
		}

		.#{$device-prefix}taper-fade-v,
		.#{$device-prefix}taper-fade-h {
			display: block;
			position: relative;
			overflow: hidden;

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				box-sizing: border-box;
				transition: var(--transition-fast);
				pointer-events: none;
				inset: 0;
				margin: auto 0 0;
				width: 100%;
				height: 2rem;
				z-index: 100;
			}

			&::before {
				margin: 0 0 auto;
				background: linear-gradient(
					180deg,
					with-opacity(var(--default), 100),
					with-opacity(var(--default), 0)
				);
			}

			&::after {
				background: linear-gradient(
					0deg,
					with-opacity(var(--default), 100),
					with-opacity(var(--default), 0)
				);
			}
		}

		.#{$device-prefix}taper-fade-h {
			&::before,
			&::after {
				margin: 0 auto 0 0;
				width: 2rem;
				height: 100%;
			}

			&::after {
				margin: 0 0 0 auto;
			}

			&::before {
				background: linear-gradient(
					90deg,
					with-opacity(var(--default), 100),
					with-opacity(var(--default), 0)
				);
			}

			&::after {
				background: linear-gradient(
					270deg,
					with-opacity(var(--default), 100),
					with-opacity(var(--default), 0)
				);
			}
		}

		.#{$device-prefix}taper-fade-none {
			&::before,
			&::after {
				display: none;
			}
		}

		// Device Breakpoints End
	}
}