@import 'shared';

.battleboard {
	position: absolute;
	overflow-x: auto;
	display: block;
	width: 100%;
	height: $view_height;

	.field {
		width: 100%;
		// width: calc(100% - #{$burst_width});
		// height: calc(#{$view_height} - 100px);
		height: $view_height;
		position: absolute;
		top: -60px;
		left: $burst_width;

		> div {
			height: 100%;
			width: calc(#{$card_width} + 20px);
			position: absolute;
		}

	}

	.space {
		position: absolute;
		background-color: grey;
		width: calc(#{$card_width} + 20px);
		height: #{$card_height};		
		border: 1px solid #36a8ff;

		img.selectable:hover, img.selected {
			// border: 1px solid #f41111;
			box-shadow: 5px 5px 5px red, -5px 5px 5px red, 5px -5px 5px red, -5px -5px 5px red;
			border-radius: 10px;
			z-index: 21;
		}

		img {
			display: block;
			width: #{$card_height};
			height: #{$card_width};
			transform: rotate(90deg);
			&.opposing {
				transform: rotate(270deg);
			}
		}

		:first-child {
			position: inherit;
			z-index: 10;
		}

		:nth-child(2) {
			position: relative;
			z-index: 9;
		}

	}

	.r1, .r2, .r3 {
		.space {
			:first-child {
				margin: -25px 25px;
				&.opposing {
					margin: -25px 45px;
				}
			}
			:nth-child(2) {
				margin: -25px 45px;
				&.opposing {
					margin: -25px 25px;
				}
			}
		}
	}

	.r4, .r5, .r6 {
		.space {
			:first-child {
				margin: -25px 45px;
				&.controlled {
					margin: -25px 25px;
				}
			}
			:nth-child(2) {
				margin: -25px 25px;
				&.controlled {
					margin: -25px 45px;
				}
			}
		}
	}

	.r1 {
		padding-left: $margin_offset;
		.space:first-child{
			top: calc(50% - #{$card_height}/2);
		}
	}

	.r2 {
		left: calc(#{$margin_offset} + (#{$card_width} + 25px + 10px)*1);
		.space:first-child {
			top: calc(38% - #{$card_height}/2);
		}
		.space:nth-child(2) {
			top: calc(62% - #{$card_height}/2);
		}
	}

	.r3 {
		left: calc(#{$margin_offset} + (#{$card_width} + 25px + 10px)*2);
		.space:first-child {
			top: calc(26% - #{$card_height}/2);
		}
		.space:nth-child(2) {
			top: calc(50% - #{$card_height}/2);
		}
		.space:nth-child(3) {
			top: calc(74% - #{$card_height}/2);
		}
	}

	.r4 {
		left: calc(#{$margin_offset} + (#{$card_width} + 25px + 10px)*3);
		.space:first-child {
			top: calc(26% - #{$card_height}/2);
		}
		.space:nth-child(2) {
			top: calc(50% - #{$card_height}/2);
		}
		.space:nth-child(3) {
			top: calc(74% - #{$card_height}/2);
		}
	}

	.r5 {
		left: calc(#{$margin_offset} + (#{$card_width} + 25px + 10px)*4);
		.space:first-child {
			top: calc(38% - #{$card_height}/2);
		}
		.space:nth-child(2) {
			top: calc(62% - #{$card_height}/2);
		}
	}

	.r6 {
		padding-right: $margin_offset;
		left: calc(#{$margin_offset} + (#{$card_width} + 25px + 10px)*5);
		.space:first-child{
			top: calc(50% - #{$card_height}/2);
		}
	}

}
