/* !---------- Board Button Styles ---------- */

.button-container {
	background: var(--bg-primary);
	padding: 10px 14px;
	border-radius: 10px;
	display: flex;
	gap: 14px;
	margin-top: 10px;
}

.board-button {
	align-items: center;
	font-family: 'JetBrains Mono', monospace;
	appearance: none;
	background-color: var(--bg-primary);
	border-radius: 0.4vw;
	border-width: 0.1vw;
	box-shadow: #000000 0 0.2vw 0, rgba(45, 35, 66, 0.3) 0 0.7vw 0 -0.3vw, var(--bg-secondary) 0 -0.3vw 0 inset;
	box-sizing: border-box;
	color: var(--text-primary);
	cursor: pointer;
	display: inline-flex;
	height: 5vh;
	justify-content: center;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow 0.15s, transform 0.15s;
	user-select: none;
	font-size: 1.8vw;
}

.board-button svg {
	height: 3vh;
	min-width: 2rem;
	margin: 0 1.5rem;
	color: var(--text-primary);
}

.board-button:hover {
	transform: translateY(-0.3vw);
}

.board-button:active {
	box-shadow: var(--bg-secondary) 0 0.3vw 0.7vw inset;
	transform: translateY(0.3vw);
}