/* ---- Tagify ---- */
.tagify {
	--tags-border-color: var(--ink-2);
	--tags-focus-border-color: color-mix(in oklch, var(--ink-2) 60%, var(--ink-3) 40%);
	--tags-hover-border-color: var(--ink-2);

	--tag-bg: var(--ink-5);
	--tag-text-color: var(--ink-0);
	--tag-hover: oklch(from var(--ink-5) calc(l * var(--hover-off)) c h);
	--tag-border-radius: var(--radius-m);
	--tag-pad: var(--space-2s);

	--tag-invalid-bg: var(--color-error);

	--placeholder-color: var(--ink-3);
	--placeholder-color-focus: var(--ink-2);

	&, *, *::before, *::after  {
		transition: none !important;
		animation: none !important;
	}

	&.tagify--focus{
		/* 設定値で更新するために再宣言する */
		--tags-border-color: var(--tags-focus-border-color);
	}

	gap: var(--space-2s);
	padding: var(--space-2s);
	border-radius: var(--radius-m);

	.tagify__input{
		min-height: calc(1lh - 1px);
		padding: 0;
		margin: 0;
		line-height: var(--line-height-m);
	}

	.tagify__tag {
		margin: 0;
		cursor: pointer;

		> div {
			padding: 0 var(--space-2s);
			font-weight: bold;
			line-height: var(--line-height-m);
		}

		&:focus div::before,
		&:hover:not([readonly]) div::before {
			--tag-bg-inset: 0 !important;
		}

		&:active:not([readonly]) div::before {
			--tag-bg: var(--ink-3);
		}

		&.tagify--notAllowed:not(.tagify__tag--editable) div>span {
			opacity: 1;
		}
	}

	/* 削除ボタンを非表示 */
	.tagify__tag__removeBtn {
		display: none !important;
	}
}

.tagify__dropdown {
	--tagify-dd-color-primary: var(--ink-3);
	--tagify-dd-text-color: var(--ink-5);
	--tagify-dd-bg-color: var(--ink-0);

	/* マウスイベントを無効化 (キーボード操作の妨げになるため) */
	&.is-inputting {
		pointer-events: none;
	}

	&, *, *::before, *::after  {
		transition: none !important;
		animation: none !important;
	}

	.tagify__dropdown__item {
		/* 左側の余白を無くす */
		text-indent: 0 !important;

		/* チェックマーク(✓)を非表示 */
		&::before {
			display: none !important;
		}

		&.tagify__dropdown__item--active {
			color: var(--ink-0) !important;
			background: var(--ink-5) !important;
		}
	}
}