@import '../../../../styles/partials/variables';

$button-size: 29px;
$border-radius: 8px;
$default-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) !important;
$hover-box-shadow: 0 0 7px rgba(0, 0, 0, 0.8) !important;
$pressed-box-shadow: 0 0 7px rgba(0, 0, 0, 1) !important;

:host {
	display: block;
	width: $button-size;
	height: $button-size;

	&.draggable-hover {
		box-shadow: 0 0 5px 1px white;
		border-radius: 4px;
	}

	&.empty {
		visibility: hidden;
	}
}

.action-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	box-shadow: $default-box-shadow;
	position: relative;
	user-select: none;

	&:hover, &:focus:hover {
		box-shadow: $hover-box-shadow;
	}

	&:focus {
		outline: none;
		box-shadow: $default-box-shadow;
	}

	&:active, &:hover:active, &:focus:hover:active {
		box-shadow: $pressed-box-shadow, inset 0 0 0 black;

		> canvas {
			opacity: 0.8;
		}
	}

	&.active {
		border-color: white;
	}

	&.no-shadow, &:focus.no-shadow, &:focus:hover.no-shadow {
		box-shadow: none !important;
	}
}

canvas {
	display: block;
	border-radius: 4px;
}

.shortcut {
	pointer-events: none;
	position: absolute;
	top: -4px;
	right: -2px;
	font-size: 9px;
	color: white;
	font-weight: bold;
	text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black,
		0px 0px 1px black, 0px 0px 1px black;
}

.count {
	pointer-events: none;
	position: absolute;
	bottom: -7px;
	right: -2px;
	font-size: 12px;
	color: white;
	font-weight: bold;
	text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black,
		0px 0px 1px black, 0px 0px 1px black;
}

.cover {
	position: absolute;
	left: -5px;
	top: -5px;
	right: -5px;
	bottom: -5px;
}
