div.svelte-sxnzgr {
		--emojiOpacity: 1;
		--emojiTop: 0;
		--emojiTop: 0.5em;
		--emojiOpacity: 0;

		background-color: transparent;
		box-shadow: none;

		/* don't allow line wrap */
		white-space: nowrap;

		padding: 0.9em 2em;
		cursor: pointer;
		position: relative;
		border-radius: 2px;
		--transdur: 0.1s;
		transition:
			scale var(--transdur) cubic-bezier(0.44, -0.01, 0.05, 1.52),
			background-color var(--transdur),
			box-shadow var(--transdur);
		flex-grow: 2;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	div.svelte-sxnzgr[data-active="true"] {
		--emojiTop: 0em;
		--emojiOpacity: 1;
	}

	/* skeuomorphic */
	div[data-active="true"].skeuomorphic.svelte-sxnzgr {
		background-color: var(--surface-color-primary);
		box-shadow:
			inset 0 -1px 0px 0px rgba(0, 0, 0, 0.3),
			inset 0 1px 0px 0px rgba(255, 255, 255, 0.1),
			0px 10px 10px -10px rgba(0, 0, 0, 1);
	}

	div.skeuomorphic.svelte-sxnzgr:not([data-active="true"]) {
		opacity: 0.8;
	}

	div.skeuomorphic.svelte-sxnzgr:hover {
		opacity: 1;
	}

	div.skeuomorphic.svelte-sxnzgr:not([data-active="true"]):hover {
		background-color: var(--surface-color-secondary);
	}

	.emoji.svelte-sxnzgr {
		position: absolute;
		left: 50%;
		top: var(--emojiTop);
		transform: translate(-50%, -50%);
		opacity: var(--emojiOpacity);

		transition:
			top 0.3s cubic-bezier(0.44, -0.01, 0.05, 1.52),
			opacity 0.2s;
	}

	/* flat */
	div.flat.svelte-sxnzgr {
		border-radius: 1em;
		color: var(--on-surface);
	}
	div.flat.svelte-sxnzgr:not([data-active="true"]) {
		opacity: 0.3;
	}
	div.flat.svelte-sxnzgr[data-active="true"] {
		background-color: var(--surface-color-primary);
		opacity: 1;
	}

	div.flat.svelte-sxnzgr:hover {
		background-color: var(--surface-color-tertiary);
	}

	/* disable pointer events for contents */

	div.svelte-sxnzgr > * {
		pointer-events: none;
	}

	/* mobile */

	@media only screen and (max-width: 800px) {
		div.svelte-sxnzgr {
			padding: 0.7em 1em;
			/* font-size: 0.9em; */
		}
	}

	@media only screen and (max-width: 600px) {
		/* (empty) div {
			/* padding: 0.5em 0.8em; *\/
			/* font-size: 0.8em; *\/
		}*/
	}