@import "Theme.scss";

ReplayReactionPicker {
	width: 100%;
	margin-top: 12px;
	flex-shrink: 0;
	pointer-events: none;
	font-family: $font;
	color: $white;

	.picker {
		width: 320px;
		padding: 10px;
		flex-direction: column;
		gap: 8px;
		background-color: #283540;
		border: 3px solid #dddd99;
		pointer-events: all;
	}
	.heading { font-size: 26px; color: #dddd99; }
	.hint { font-size: 18px; }
	.effects { flex-wrap: wrap; gap: 8px; justify-content: center; }
	.effect {
		width: 62px;
		height: 50px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 6px;
		background-color: $black;
		border: 2px solid #69737d;
		cursor: blank-hand;
		&:hover { background-color: #59616a; }
		&.selected { border-color: #dddd99; background-color: #50594d; }
	}
	.art { background-size: 100% 100%; image-rendering: pixelated; flex-shrink: 0; }
	.action {
		align-self: center;
		padding: 6px 16px;
		justify-content: center;
		font-size: 18px;
		background-color: $black;
		border: 2px solid #69737d;
		cursor: blank-hand;
		&:hover { border-color: $white; }
	}
}