.tile {
	padding: calc(3 * var(--spacing));
	border-radius: var(--rounded);
	background-color: var(--bg-color-light);
	border: 1px solid var(--bg-color);

	&.clear {
		background-color: transparent;
		border: 1px solid var(--color-neutral-200);
	}

	&.white {
		background-color: white;
		border: 1px solid var(--color-neutral-200);
	}

	&.gray {
		background-color: var(--color-neutral-200);
	}

	&.green {
		background-color: var(--color-emerald-xlight);
		border: 1px solid var(--color-emerald-light);
	}

	&.red {
		background-color: var(--color-red-xlight);
		border: 1px solid var(--color-red-light);
	}

	&.orange {
		background-color: var(--color-orange-xlight);
		border: 1px solid var(--color-orange-light);
	}

	&.blue {
		background-color: var(--color-sky-xlight);
		border: 1px solid var(--color-sky-light);
	}
}