@import 'current-encounter';
@import 'group-info';
@import 'monster-table';
@import 'search';

$encounter-builder-info-bar-height: 70px;
.encounter-builder {
	.encounter-builder--encounter-info-bar {
		display: none;
	}

	@media (max-width: 768px) {
		$navbar-height: 50px;

		.encounter-builder--encounter-info-bar {
			display: block;
			height: $encounter-builder-info-bar-height;
		}

		// This container is just the available room for the encounter info to take up
		.encounter-builder--current-encounter-container {
			position: fixed;
			top: $navbar-height;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
			pointer-events: none;
		}

		// This contains the info bar and the encounter itself
		.encounter-builder--current-encounter-slider {
			position: absolute;
			left: 0;
			right: 0;
			height: 100%;
			pointer-events: auto;
			top: calc(100% - #{$encounter-builder-info-bar-height});
			transition: top 0.5s;

			&.encounter-builder--current-encounter-slider.encounter-builder--current-encounter-slider__shown {
				top: 0;
			}
		}

		.encounter-builder--toggle-arrow {
			font-size: 1.5em;
			display: inline-block;
			position: absolute;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
		}

		.encounter-builder--encounter-info-bar {
			$border-width: 1px;
			background-color: #eee;
			height: $encounter-builder-info-bar-height;
			border-width: 1px 0 1px;
			border-style: solid;
			border-top-color: #000;
			border-bottom-color: #000;
			padding: 5px;
			position: relative;
			cursor: pointer;
		}

		.encounter-builder--encounter-info-text {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 1.2em;
		}

		.encounter-builder--current-encounter {
			background-color: white;
			overflow: auto;
			position: absolute;
			top: $encounter-builder-info-bar-height;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 5px;
		}
	}
}

// Add padding to body so that the encounter info bar doesn't cover anything up
@media (max-width: 768px) {
	body {
		padding-bottom: $encounter-builder-info-bar-height;
	}
}

.difficulty-legend {
	bottom: 0;
	right: 1rem;
	position: fixed;
	text-align: right;
	z-index: 2;

	@include challenge-colors;

	li {
		padding: 5px;
	}

	&-popout {
		text-align: left;
	}
}

.difficulty-legend-sm {
	@include challenge-colors;
	
	li {
		padding: 5px;
	}
}
