.st-filtered {
	/*filter: grayscale(1) contrast(0.5) opacity(.15);
	transition: filter .2s;*/
	opacity: .1;
	transition: opacity .2s;

	&:hover, &:active {
		/*filter: none;
		transition: filter .2s;*/
		opacity: 1;
	}
}

.st-button {
	display: inline-block;
	background-color: var(--clr-tag-button-bg);
	border: 1px solid var(--clr-tag-button-border);
	border-radius: 2rem 5px 5px 2rem;
	break-inside: avoid;

	line-height: 1.4rem;
	padding: 0 4px 0 .4rem;
	font-size: 1rem;

	cursor: pointer;
	will-change: transform;

	&::before {
		content: ' ';
		display: inline-block;
		width: 1rem;
		height: 1rem;
		background-color: var(--clr-tag-button-bg-hole);
		border: 1px solid var(--clr-tag-button-border);
		border-radius: 99rem;
		position: relative;
		top: 0.15rem;
		left: -0.2rem;
	}

	&:hover {
		bottom: 0;
		filter: none;
	}

	@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
		--shake-intensity: 2deg;
		transform-origin: 1rem;

		animation: shake-2 .5s ease-out;

		&:active {
			/*animation: shake-2 .5s ease-out;*/
			animation: none;
		}
	}

	&.st-faded {
		color: var(--clr-tag-button-text-faded);
	}

	&.st-enabled {
		color: var(--clr-tag-button-text-enabled);

		&::before {
			background-color: var(--clr-tag-button-bg-enabled);
		}

		&::after {
			content: ' ';
			mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
			width: 16px;
			height: 16px;
			display: block;
			position: absolute;
			top: 0.25rem;
			background-color: var(--clr-tag-button-symbol-enabled);
			left: 0.25rem;
		}
	}

	&.st-negated {
		color: var(--clr-tag-button-text-negated);

		&::before {
			background-color: var(--clr-tag-button-bg-negated);
		}

		&::after {
			content: ' ';
			mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
			width: 16px;
			height: 16px;
			display: block;
			position: absolute;
			top: 0.2rem;
			background-color: var(--clr-tag-button-symbol-negated);
			left: 0.25rem;
		}
	}
}

@media (scripting: none) {
	.st-button {
		cursor: default;
	}
}