@use '../mixins/var' as *;
@use '../mixins/function' as *;
@use '../common/var' as *;

@mixin button-plain($type) {
	$button-color-types: (
		'': (
			'text-color': (
				'color',
				$type,
			),
			'bg-color': (
				'color',
				$type,
				'light-9',
			),
			'border-color': (
				'color',
				$type,
				'light-5',
			),
		),
		'hover': (
			'text-color': (
				'color',
				'white',
			),
			'bg-color': (
				'color',
				$type,
			),
			'border-color': (
				'color',
				$type,
			),
		),
		'active': (
			'text-color': (
				'color',
				'white',
			),
		),
	);

	@each $type, $typeMap in $button-color-types {
		@each $typeColor, $list in $typeMap {
			@include css-var-from-global(('button', $type, $typeColor), $list);
		}
	}

	&.is-disabled {
		&,
		&:hover,
		&:focus,
		&:active {
			color: getCssVar('color', $type, 'light-5');
			background-color: getCssVar('color', $type, 'light-9');
			border-color: getCssVar('color', $type, 'light-8');
		}
	}
}

@mixin button-variant($type) {
	$button-color-types: (
		'': (
			'text-color': (
				'color',
				'white',
			),
			'bg-color': (
				'color',
				$type,
			),
			'border-color': (
				'color',
				$type,
			),
			'outline-color': (
				'color',
				$type,
				'light-5',
			),
			'active-color': (
				'color',
				$type,
				'dark-2',
			),
		),
		'hover': (
			'text-color': (
				'color',
				'white',
			),
			'link-text-color': (
				'color',
				$type,
				'light-5',
			),
			'bg-color': (
				'color',
				$type,
				'light-3',
			),
			'border-color': (
				'color',
				$type,
				'light-3',
			),
		),
		'active': (
			'bg-color': (
				'color',
				$type,
				'dark-2',
			),
			'border-color': (
				'color',
				$type,
				'dark-2',
			),
		),
		'disabled': (
			'text-color': (
				'color',
				'white',
			),
			'bg-color': (
				'color',
				$type,
				'light-5',
			),
			'border-color': (
				'color',
				$type,
				'light-5',
			),
		),
	);

	@each $type, $typeMap in $button-color-types {
		@each $typeColor, $list in $typeMap {
			@include css-var-from-global(('button', $type, $typeColor), $list);
		}
	}

	&.is-plain,
	&.is-text,
	&.is-link {
		@include button-plain($type);
	}
}

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
	padding: $padding-vertical $padding-horizontal;
	font-size: $font-size;
	border-radius: $border-radius;

	&.is-round {
		padding: $padding-vertical $padding-horizontal;
	}
}