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

@mixin generate-button(
	$transitions-global,
	$height-atoms,
	$border-radius-atoms,
	$corner-shape-atoms
) {
	.nuitral-button {
		display: flex;
		height: $height-atoms;
		padding: 8px 16px;
		align-items: center;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.5;
		border-radius: $border-radius-atoms;
		transition: $transitions-global;
		corner-shape: $corner-shape-atoms;
		cursor: pointer;
		overflow: hidden;
		box-sizing: border-box;
		gap: 4px;
		backface-visibility: hidden;
		border-style: none;
		box-shadow: none;
		letter-spacing: normal;
		text-decoration: none;
		white-space: nowrap;
		outline: none;
	}
}

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

@mixin generate-button-states($var, $scale-var, $box-shadow-focus) {
	&:hover {
		background-color: var(--#{$var}-extra-light);
	}

	&:active {
		background-color: var(--#{$var}-darken);
	}

	&:focus {
		box-shadow: var(--box-shadow-focus);
	}

	&:disabled {
		color: var(--#{$var}-#{$scale-var}-text);
		opacity: 0.6;
		background-color: var(--#{$var}-#{$scale-var});
		pointer-events: none;
		box-shadow: none;
	}
}

@mixin generate-button-icon($var, $scale-var) {
	.nuitral-icon {
		color: var(--#{$var}-#{$scale-var}-text);
	}
}

@mixin generate-button-background-classes(
	$theme,
	$box-shadow,
	$box-shadow-focus
) {
	@each $var, $scale in $theme {
		@each $scale-var, $color in $scale {
			@if $scale-var == 500 {
				.nuitral-button-background-#{$var} {
					@include generate-button-background(
						$var,
						$scale-var,
						$box-shadow
					);
					@include generate-button-states(
						$var,
						$scale-var,
						$box-shadow-focus
					);
					@include generate-button-icon($var, $scale-var);
				}
			}
			.nuitral-button-background-#{$var}-#{$scale-var} {
				@include generate-button-background(
					$var,
					$scale-var,
					$box-shadow
				);
				@include generate-button-states(
					$var,
					$scale-var,
					$box-shadow-focus
				);
				@include generate-button-icon($var, $scale-var);
			}
		}
	}
}

@mixin button(
	$light-scale,
	$height-atoms,
	$border-radius-atoms,
	$corner-shape-atoms,
	$transitions-global,
	$light-box-shadow,
	$dark-box-shadow
) {
	@include generate-button(
		$transitions-global,
		$height-atoms,
		$border-radius-atoms,
		$corner-shape-atoms
	);
	@include generate-button-background-classes(
		$light-scale,
		var(--box-shadow),
		var(--box-shadow-focus)
	);
}