/**
 * No.26 ラベル。
 * Figma デザインシステム: c-label（2262:200）。
 * grey-L20 → base-black、white → base-white。hover は logo-blue。
 */

.label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: var(--wp--custom--atom--xs);
	padding-inline: var(--wp--custom--atom--rg);
	padding-block: var(--wp--custom--atom--sm);
	flex-shrink: 0;
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--base-black);
	border-radius: var(--wp--custom--radius--none);
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--none);
	white-space: nowrap;
	color: var(--wp--preset--color--base-white);
	background-color: var(--wp--preset--color--base-black);
}

.label[data-style="outlined"] {
	color: var(--wp--preset--color--base-black);
	background-color: var(--wp--preset--color--base-white);
}

.label[data-size="rg"] {
	padding-inline: var(--wp--custom--atom--md);
	padding-block: var(--wp--custom--atom--rg);
	font-size: var(--wp--preset--font-size--text-sm);
}

.label[data-size="md"] {
	padding-inline: var(--wp--custom--atom--md);
	padding-block: var(--wp--custom--atom--rg);
	font-size: var(--wp--preset--font-size--text-md);
}

.label[data-size="lg"] {
	padding-inline: var(--wp--custom--atom--md);
	padding-block: var(--wp--custom--atom--rg);
	font-size: var(--wp--preset--font-size--text-lg);
}

.label[data-size="xl"] {
	padding-inline: var(--wp--custom--atom--md);
	padding-block: var(--wp--custom--atom--rg);
	font-size: var(--wp--preset--font-size--text-xl);
}

.label .icon {
	inline-size: 1em;
	block-size: 1em;
}

/* 単体は非インタラクティブ。色変化は親 a の hover 時のみ */
a:hover .label,
a:focus-visible .label {
	border-color: var(--wp--preset--color--logo-blue);
}

a:hover .label[data-style="filled"],
a:focus-visible .label[data-style="filled"] {
	background-color: var(--wp--preset--color--logo-blue);
}

a:hover .label[data-style="outlined"],
a:focus-visible .label[data-style="outlined"] {
	color: var(--wp--preset--color--logo-blue);
}

.label:focus {
	outline: none;
}

/* 終了したイベントの日付。ボタンの disabled と同じトークン。 */
.label[data-state="disabled"] {
	background-color: color-mix(in srgb, var(--wp--preset--color--base-white) 30%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--line-grey) 30%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--base-black) 30%, transparent);
}

.label:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

/*
 * 会場ラベルの地図リンク。
 * invert の青はロゴブルー。テーマのパレットに base-blue は無い。
 * ホバーできない端末（タッチ）では、リンクがあると文字と枠を青のままにする。
 * 画面幅では判定しない（コーディングルール「タッチデバイスでのホバー」）。
 */
a.label__link {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
}

a.label__link .label[data-hover-bg="invert"] {
	--hover-invert-a: var(--wp--preset--color--base-white);
	--hover-invert-b: var(--wp--preset--color--logo-blue);
}

@media (hover: hover) and (pointer: fine) {
	a.label__link:hover .label[data-hover-bg="invert"] {
		background-color: var(--hover-invert-b);
		color: var(--hover-invert-a);
		border-color: var(--hover-invert-b);
	}
}

a.label__link:focus-visible .label[data-hover-bg="invert"] {
	background-color: var(--hover-invert-b);
	color: var(--hover-invert-a);
	border-color: var(--hover-invert-b);
}

@media not ((hover: hover) and (pointer: fine)) {
	a.label__link .label {
		color: var(--wp--preset--color--logo-blue);
		border-color: var(--wp--preset--color--logo-blue);
	}
}

.label-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--atom--rg);
}