/* Patterns - Content - Tag */
////
/// @group Patterns-Tag
/// Patterns - Content - Tag

///
.tag {
	align-items: center;
	color: var(--color-neutral-0);
	display: inline-flex;
	font-weight: var(--font-semi-bold);
	height: 32px;
	justify-content: center;
	line-height: 1;
	min-width: 32px;
	padding: var(--space-none) var(--space-base);
	word-break: normal;

	&.tag {
		&-small {
			font-size: var(--font-size-xs);
			height: 24px;
			padding: var(--space-none) var(--space-s);
		}

		&-medium {
			font-size: var(--font-size-base);
			height: 40px;
			padding: var(--space-none) var(--space-m);
		}
	}

	&.background {
		&-transparent {
			color: var(--color-primary);
		}

		&-neutral {
			&-0 {
				color: var(--color-primary);
			}

			&-1,
			&-2,
			&-3,
			&-4 {
				color: var(--color-neutral-9);
			}
		}
	}
}