@schukai/monster/source/components/style/badge.css

Monster is a simple library for creating fast, robust and lightweight websites.

/** generated from badge.pcss **/
.monster-badge-primary {
	padding: .25em .4em;
}
.monster-badge-primary,
.monster-badge-primary-pill {
	background-color: var(--monster-bg-color-primary-4);
	border-radius: .25rem;
	color: var(--monster-color-primary-4);
	display: inline-block;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}
.monster-badge-primary-pill {
	border-radius: 10rem;
	padding: .25em .6em;
}
.monster-badge-secondary {
	padding: .25em .4em;
}
.monster-badge-secondary,
.monster-badge-secondary-pill {
	background-color: var(--monster-bg-color-secondary-3);
	border-radius: .25rem;
	color: var(--monster-color-secondary-3);
	display: inline-block;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}
.monster-badge-secondary-pill {
	border-radius: 10rem;
	padding: .25em .6em;
}
.monster-badge-tertiary {
	padding: .25em .4em;
}
.monster-badge-tertiary,
.monster-badge-tertiary-pill {
	background-color: var(--monster-bg-color-tertiary-3);
	border-radius: .25rem;
	color: var(--monster-color-tertiary-3);
	display: inline-block;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}
.monster-badge-tertiary-pill {
	border-radius: 10rem;
	padding: .25em .6em;
}
.monster-badge-destructive {
	padding: .25em .4em;
}
.monster-badge-destructive,
.monster-badge-destructive-pill {
	background-color: var(--monster-bg-color-destructive-1);
	border-radius: .25rem;
	color: var(--monster-color-destructive-1);
	display: inline-block;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}
.monster-badge-destructive-pill {
	border-radius: 10rem;
	padding: .25em .6em;
}
.monster-badge-success {
	padding: .25em .4em;
}
.monster-badge-success,
.monster-badge-success-pill {
	background-color: var(--monster-bg-color-success-1);
	border-radius: .25rem;
	color: var(--monster-color-success-1);
	display: inline-block;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}
.monster-badge-success-pill {
	border-radius: 10rem;
	padding: .25em .6em;
}
.monster-badge-warning {
	padding: .25em .4em;
}
.monster-badge-warning,
.monster-badge-warning-pill {
	background-color: var(--monster-bg-color-warning-1);
	border-radius: .25rem;
	color: var(--monster-color-warning-1);
	display: inline-block;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}
.monster-badge-warning-pill {
	border-radius: 10rem;
	padding: .25em .6em;
}
.monster-badge-error {
	padding: .25em .4em;
}
.monster-badge-error,
.monster-badge-error-pill {
	background-color: var(--monster-bg-color-error-1);
	border-radius: .25rem;
	color: var(--monster-color-error-1);
	display: inline-block;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;
	white-space: nowrap;
}
.monster-badge-error-pill {
	border-radius: 10rem;
	padding: .25em .6em;
}