.container {
	display: inline-block;
}

.badge {
	display: inline-block;
	padding: .25em .5em;
	border-radius: var(--radius);
	background-color: var(--light-gray);
	font-size: .85em;
	line-height: 1;
}

.badgeText {
	font-size: var(--font-size-1);
	font-weight: var(--font-weight-bold);
	line-height: .5;
}

.primary {
    background-color: var(--fg);
    color: var(--bg);
}

.primary::selection {
	background-color: var(--bg);
	color: var(--fg);
}

.secondary {
    background-color: var(--light-gray);
}

.warning {
    background-color: var(--warning);
	color: var(--fg);
}

/* when data-theme on html is light, change font color */
[data-theme="light"] .warning {
	color: var(--bg);
}

.error {
    background-color: red;
}