@use "../../00-base/colors/colors";

.hoo-mtag-lbl {
	font-size: .875em;
	line-height: 1.25em;

	display: block;

	box-sizing: border-box;
	margin: 0.125em .75em 0;
	padding: 0 0.25em 0;

	flex-wrap: nowrap;
}

.hoo-mtag,
.hoo-mtag-primary {
	font-size: 1rem;

	display: inline-flex;
	flex-direction: row;

	box-sizing: border-box;
	height: 1.5em;
	padding: 0;

	text-decoration: none;

	border: none;
	border-radius: .75em;

	align-content: center;
	align-items: baseline;
}

.hoo-mtag {
	color: colors.$neutral-700;
	background-color: colors.$neutral-100;
}

.hoo-mtag-primary {
	color: colors.$neutral-000;
	background-color: colors.$theme-700;

	&:visited {
		color: colors.$neutral-000;
		background-color: colors.$theme-700;
	}
}

a.hoo-mtag,
button.hoo-mtag {
	cursor: pointer;

	&:hover {
		color: colors.$neutral-000;
		background-color: colors.$theme-700;
	}
}

a.hoo-mtag-primary,
button.hoo-mtag-primary {
	cursor: pointer;

	&:hover {
		color: colors.$neutral-700;
		background-color: colors.$neutral-100;
	}
}