@import url(variables.css);

/**
 * Screen sizes, from:
 * X-Small: 0
 * Small: 37em
 * Medium: 56em
 * Large: 75em
 * X-Large: 90em
 * XX-Large: 120em
 */

.xs-only {
	white-space: nowrap;
}

.sm-up {
	display: none;
}
 
/* Small */
@media screen and (min-width: 37em) {
	.xs-only {
		display: none;
	}

	.sm-up {
		display: table-cell;
	}

	#adversary-stats .stat-block {
		grid-template-columns: repeat(5, 1fr);
	}

	.adversary {
		display: flex;
		flex-direction: column;

		h2 {
			display: inline-block;
		}

		label {
			span {
				min-width: auto;
				display: block;
				text-align: center;
			}
		}

		.button button span {
			display: inline-block;
		}

		.stat-block {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: var(--spacing-2);
		}
	}
}

/* Medium */
@media screen and (min-width: 56em) {
	#adversary-panel {
		grid-template-columns: repeat(2, 1fr);
	}

	.adversary {
		flex-direction: row;

		.stat-block {
			flex-grow: 1;
		}

		.title {
			min-width: 10rem;
		}

		label {
			margin-bottom: 0;
		}

		.button {
			position: static;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: var(--spacing-2);
		}
	}
}

/* Large */
@media screen and (min-width: 75em) {
	.topbar button {
		display: none;
	}

	nav {
		transform: translateX(0);
		max-width: auto;
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
	}

	.container {
		display: grid;
		grid-template-columns: var(--menu-width) 1fr;
		gap: var(--spacing-2);
	}

	.adversary {
		label {
			display: block;

			& > span {
				display: block;
				text-align: center;
				margin-bottom: var(--spacing-1);
			}
		}

		.button button span {
			display: inline-block;
		}
	}
}

/* X large */
@media screen and (min-width: 90em) {
	#adversary-panel {
		display: grid;
		grid-template-columns: 1fr 2fr;
	}

	#adversary-stats {
		display: grid;
		gap: var(--spacing-6);
		grid-template-columns: 3fr 2fr;
	}

	.adversaries-group {
		display: grid;
		gap: var(--spacing-4);
		grid-template-columns: 1fr 1fr;

		.adversary .grid {
			gap: var(--spacing-2);
		}

		.adversary .button button span {
			display: none;
		}
	}
}