/* /pi-theme/assets/css/buttons.css */

.btn-retro {
	text-decoration: none;
	display: inline-block;
	color: var(--pi-color-text-bright);
	background-color: var(--pi-color-panel);
	text-align: center;
	padding: var(--pi-space-xs) var(--pi-space-sm);
	box-shadow: 4px 4px 0 0 var(--pi-color-shadow);
	outline: none;
	border: none;
	margin: var(--pi-space-xs);
	min-width: 80px;
	font-weight: bold;
	font-family: var(--pi-font-family);
	font-size: 16px;
	text-shadow: 2px 2px 2px black;
	transition: background-color 0.5s ease, transform 0.1s ease;
}

.btn-retro:hover {
	text-decoration: none;
	background-color: var(--pi-accent-dark-red);
	cursor: pointer;
}

.btn-retro:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--pi-color-shadow);
}

.btn-retro:disabled {
	transform: translate(0, 0);
	box-shadow: 4px 4px 0 0 var(--pi-color-shadow);
	opacity: 0.5;
	background-color: var(--pi-nav-highlight);
}

.btn-retro:focus {
	border: 3px dotted var(--pi-color-text-dim);
}

.btn-large {
	font-size: 18px;
	margin-right: 14px;
	padding: var(--pi-space-sm);
	box-shadow: 8px 8px 0 0 var(--pi-color-shadow);
}

.btn-large:active {
	transform: translate(3px, 3px);
	box-shadow: 4px 4px 0 0 var(--pi-color-shadow);
}

.btn-tiny {
	width: 28px;
	height: 28px;
	padding: 0;
	min-width: 28px;
	text-align: center;
}

.btn-red {
	background-color: var(--pi-accent-red);
}

.btn-blue {
	background-color: var(--pi-accent-blue);
}

.btn-orange {
	background-color: var(--pi-code-orange);
}