@use '~@quartz/styles/scss/color-scheme';
@use '~@quartz/styles/scss/fonts';
@use '~@quartz/styles/scss/tokens';

.container {
	@include fonts.maison-extended-700-1;

	display: inline-block;
	white-space: nowrap;

	&.faint {
		@include fonts.maison-extended-700-1;

		background-color: color-scheme.$highlight;
		border-radius: tokens.$size-border-radius;
		padding: 0.5em;
		vertical-align: middle;
	}

	&.inverted {
		@include fonts.maison-800-4;

		color: color-scheme.$typography-inverted;
		background-color: color-scheme.$typography;
		border-radius: 4px;
		padding: 0.4em;
		text-transform: none;
		line-height: 1;
	}

	.icon {
		margin-right: 4px;
	}
}