.button {
	user-select: none;
	cursor: pointer;
	border-radius: var(--radius);
	color: var(--input-fg);
	font-weight: 400;
	font-size: 1.1rem;
	background: var(--input-bg);
	border: var(--input-border);
	height: 2rem;
	display: flex;
	align-items: center;
	padding: var(--gap-quarter) var(--gap-half);
	transition: background-color var(--transition), color var(--transition);
	width: 100%;
	height: var(--input-height);
}

.button:hover,
.button:focus {
	outline: none;
	background: var(--input-bg-hover);
	border: var(--input-border-focus);
}

.button[disabled] {
	cursor: not-allowed;
	background: var(--lighter-gray);
	color: var(--gray);
}

.secondary {
	background: var(--bg);
	color: var(--fg);
}

.primary {
	background: var(--fg);
	color: var(--bg);
}