.button:root {
	--hover: var(--bg);
	--hover-bg: var(--fg);
}

.button {
	user-select: none;
	cursor: pointer;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	padding: var(--gap-half) var(--gap);
}

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

.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);
}

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

.iconRight {
	margin-left: var(--gap-half);
}

.iconLeft {
	margin-right: var(--gap-half);
}

.icon svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: scale(1.2) translateY(-0.05em);
}