/**
 * 必須／任意バッジ表示スタイル
 *
 * ユーザー側でアイコン化などのカスタマイズをする場合は
 * .smf-badge--required / .smf-badge--optional に CSS を当てる。
 */

.smf-extension-badge {
	display: inline-block;
	font-size: 0.72em;
	line-height: 1;
	padding: 0.25em 0.5em;
	margin-left: 0.5em;
	border-radius: 3px;
	vertical-align: middle;
	font-weight: 400;
	white-space: nowrap;
}

.smf-badge--required {
	background-color: #e02b2b;
	color: #fff;
}

.smf-badge--optional {
	background-color: #e5e5e5;
	color: #555;
}

/* ラベル前に置く場合は右側に余白を持たせる */
.smf-item__label > .smf-extension-badge:first-child {
	margin-left: 0;
	margin-right: 0.5em;
}

/* 「項目の下」（ラベル名のすぐ下）に置く場合はブロック表示にして改行させる */
.smf-badge--block {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin-left: 0;
	margin-top: 0.4em;
}

/* 行末に append された場合の保険（フォールバック時） */
.smf-item > .smf-extension-badge {
	display: inline-block;
	margin-left: 0;
	margin-top: 0.4em;
}