src/static/scripts/components/misc/flair/_flair.scss
@use "../../../../style/vars";

.flair {
	--flair-bg: #{vars.$background};
	--flair-tc: #{vars.$text-color};

	background-color: var(--flair-bg);
	color: var(--flair-tc);
	padding: 0 0.4rem;
	border-radius: 15rem;
	font-size: 0.75rem;
	display: flex;
	align-items: stretch;
	height: 1.1rem;
	align-self: center;

	* {
		color: var(--flair-tc);
		white-space: nowrap;
		font-size: inherit;
		line-height: 1.1rem;
	}

	> div {
		display: flex;
		align-items: center;

		// these margins are needed because: <img> <text> needs space but <img> <img> doesn't
		> .flairImg {
			height: .8rem;
			display: inline-flex;

			> img {
				height: .8rem;
			}

			+ .flairText {
				margin-left: .25rem;
			}
		}

		> .flairText {
			+ .flairImg {
				margin-right: .25rem;
			}
		}
	}

	button {
		height: 1.5rem;

		img {
			height: 1.5rem;
		}
	}

	&.empty {
		margin: 0;
		padding: 0;
		display: none;
	}
}

.dropDownEntry {
	.flair {
		height: 1.6rem;
		width: 100%;
		margin-top: .35rem;
	}

	&:hover .flair * {
		color: var(--flair-tc) !important;
	}
}
