/* Sugar X Hashtag Link - frontend styles */

.sxhl-link {
	text-decoration: none;
	transition: opacity 0.15s, background 0.15s;
}

.sxhl-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: #000;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 12px;
	line-height: 1;
	flex: none;
}

/* テキストリンク（文中でも自然に使えるインライン） */
.sxhl-text {
	color: #1d6ff2;
}

.sxhl-text:hover {
	text-decoration: underline;
	color: #1d6ff2;
}

/* ピル（タグ風） */
.sxhl-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #eff2f5;
	color: #0f1419;
	border: 1px solid #e3e6ea;
	border-radius: 9999px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.sxhl-pill:hover {
	background: #e3e6ea;
	color: #0f1419;
}

/* ボタン */
.sxhl-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #0f1419;
	color: #fff !important;
	border-radius: 9999px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.sxhl-button:hover {
	opacity: 0.82;
}

.sxhl-button .sxhl-x {
	background: #fff;
	color: #000;
}

/* [x_hashtag_links] のまとめ表示 */
.sxhl-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 1em 0;
}

/* エラー表示（編集権限者のみに出力） */
.sxhl-error {
	display: inline-block;
	background: #fdecec;
	color: #b3261e;
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 13px;
	line-height: 1.6;
}