@use 'sass:map';

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

$tag-border-width: 1px;

@include b(check-tag) {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	height: map.get($tag-height, 'default');
	padding: 0 map.get($tag-padding, 'default') - $border-width;
	font-size: getCssVar('tag-font-size');
	line-height: 1;
	border-radius: getCssVar('border-radius', 'base');
	box-sizing: border-box;
	white-space: nowrap;
	background-color: getCssVar('color', 'info', 'light-9');
	color: getCssVar('color', 'info');
	cursor: pointer;
	transition: getCssVar('transition', 'all');

	&:hover {
		background-color: getCssVar('color', 'info', 'light-7');
	}

	@include when(checked) {
		@each $type in $types {
			&.#{bem('check-tag', '', $type)} {
				background-color: getCssVar('color', $type, 'light-8');
				color: getCssVar('color', $type);

				&:hover {
					background-color: getCssVar('color', $type, 'light-7');
				}
			}
		}
	}
}