@use '../functions';
@use 'sass:color';

@mixin generate-card(
	$border-radius-molecules,
	$corner-shape-molecules,
	$transitions-global
) {
	.nuitral-card {
		padding: 1rem;
		border: 1px solid;
		border-radius: $border-radius-molecules;
		transition: $transitions-global;
		box-sizing: border-box;
		corner-shape: $corner-shape-molecules;
	}
}

@mixin generate-card-background($var, $scale-var) {
	color: var(--#{$var}-#{$scale-var}-text);
	background-color: var(--#{$var}-#{$scale-var});
}

@mixin generate-card-border($var, $scale-var) {
	border-color: var(--#{$var}-#{$scale-var});
}

@mixin generate-card-background-classes($theme) {
	@each $var, $scale in $theme {
		@each $scale-var, $color in $scale {
			@if $scale-var == 500 {
				.nuitral-card-#{$var} {
					@include generate-card-background($var, $scale-var);
				}

				.nuitral-card-border-#{$var} {
					@include generate-card-border($var, $scale-var);
				}
			}
			.nuitral-card-#{$var}-#{$scale-var} {
				@include generate-card-background($var, $scale-var);
			}
			.nuitral-card-border-#{$var}-#{$scale-var} {
				@include generate-card-border($var, $scale-var);
			}
		}
	}
}

@mixin card(
	$light-scale,
	$border-radius-molecules,
	$corner-shape-molecules,
	$transitions-global
) {
	@include generate-card(
		$border-radius-molecules,
		$corner-shape-molecules,
		$transitions-global
	);
	@include generate-card-background-classes($light-scale);
}