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

// $border-radius replaced by generated $radius-names from effects map

$border-position: (
	't': (
		'start': 'top-left',
		'end': 'top-right'
	),
	'r': (
		'start': 'top-right',
		'end': 'bottom-right'
	),
	'b': (
		'start': 'bottom-right',
		'end': 'bottom-left'
	),
	'l': (
		'start': 'bottom-left',
		'end': 'top-left'
	)
);

@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}radius-none {
			border-radius: 0;
		}

		.#{$device-prefix}group:hover .group-hover\:radius-none {
			border-radius: 0;
		}

		@each $brandui-radius-val in $radius-names {
			.#{$device-prefix}radius-#{$brandui-radius-val} {
				border-radius: var(--radius-#{$brandui-radius-val});
			}

			.#{$device-prefix}radius-#{$brandui-radius-val}-plus {
				border-radius: calc(var(--radius-#{$brandui-radius-val}) + 2px);
			}

			.#{$device-prefix}group:hover
				.group-hover\:radius-#{$brandui-radius-val}-plus {
				border-radius: calc(var(--radius-#{$brandui-radius-val}) + 2px);
			}

			.#{$device-prefix}group:hover
				.group-hover\:radius-#{$brandui-radius-val} {
				border-radius: var(--radius-#{$brandui-radius-val});
			}
		}

		@each $brandui-radius-key, $brandui-radius-val in $border-position {
			$brandui-radius-start: map.get($brandui-radius-val, start);
			$brandui-radius-end: map.get($brandui-radius-val, end);

			.#{$device-prefix}radius-#{$brandui-radius-key}-none {
				border-#{$brandui-radius-start}-radius: 0;
				border-#{$brandui-radius-end}-radius: 0;
			}

			.#{$device-prefix}group:hover
				.group-hover\:radius-#{$brandui-radius-key}-none {
				border-#{$brandui-radius-start}-radius: 0;
				border-#{$brandui-radius-end}-radius: 0;
			}
		}

		// Device Breakpoints End
	}
}