@use '../tools/colors';
@use '../variables' as *;

@each $color, $color_values in colors.$colors {
	@if $color != 'shades' {
		@each $color_variant, $value in $color_values {
			@if $color_variant == 'base' {
				.#{$color} {
					background-color: $value !important;
					border-color: $value !important;
				}
				.#{$color}-text {
					color: $value !important;
					caret-color: $value !important;
				}
			}
			.#{$color}.#{$color_variant} {
				background-color: $value !important;
				border-color: $value !important;
			}
			.#{$color}-text.text-#{$color_variant} {
				color: $value !important;
				caret-color: $value !important;
			}
		}
	} @else {
		@each $shade, $value in $color_values {
			.#{$shade} {
				background-color: $value !important;
				border-color: $value !important;
			}
			.#{$shade}-text {
				color: $value !important;
				caret-color: $value !important;
			}
		}
	}
}

@each $color,
	$value
		in (
			'primary': $primary-color,
			'secondary': $secondary-color,
			'success': $success-color,
			'info': $info-color,
			'warning': $warning-color,
			'error': $error-color
		)
{
	:root {
		--#{$color}-text-color: #{$value};
		--#{$color}-text-caret-color: #{$value};

		--#{$color}-color-border-color: #{$value};
		--#{$color}-color-background-color: #{$value};
	}

	.#{$color}-color {
		border-color: $value !important;
		background-color: $value !important;
	}

	.#{$color}-text {
		color: $value !important;
		caret-color: $value !important;
	}
}