:root {
	--foreground: #f2f2f2;
	--background: #0b0d11;
	--background1: #1b1e22;
	--background2: #26292d;
	--background3: #585859;
	--background4: #9a9b98;

	--action: #908b5f;
	--on-action: var(--foreground);

	--danger: #ff3333;
	--on-danger: var(--foreground);
	--clear: rgb(3, 177, 3);
	--on-clear: var(--foreground);
	--warn: orange;
	--on-warn: var(--foreground);

	--glass: #58585986;
	--glass-blur: 20px;

	color: var(--foreground);
}

* {
	user-select: none;
	-webkit-user-select: none;
	flex-shrink: 0;

	/* Disable the gray/blue highlight that mobile devices display on tap */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	/** Disable viewport zooming on ios */
	touch-action: pan-y;
}

input {
	user-select: auto;
	-webkit-user-select: auto;
}

.spacer {
	height: 20px;
}

.spacer-x {
	width: 20px;
}

.container {
	padding: 16px;
}

.align-center {
	text-align: center;
}

.clickable:not(.disabled) {
	cursor: pointer;
	transition: opacity 100ms;
}
.clickable:not(.disabled):active {
	opacity: 0.7;
}
.clickable.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	filter: grayscale(1);
}

input,
.look-like-input {
	border: 1px solid var(--background2);
	background: none;
	font-size: 16px;
	padding: 16px 32px;
	color: var(--foreground);
	border-radius: 8px;
	outline: none;
}

input:focus:not(.bare),
.look-like-input:focus-within {
	border: 1px solid var(--action);
}

input.bare {
	border: none;
	padding: 0;
	border-radius: 0;
}

.no-display {
	display: none;
}