@use "vars/vars";

.list--stats {
	height: initial;
	max-height: 100%;
	min-height: 100px;
}

.list.subitems {
	min-height: initial;
}

span.side-label {
	position: absolute;
	bottom: 0;
	left: -22px;
	transform: rotate(-90deg);
	transform-origin: 0 0;
	font-size: 18px;
}

h3.ele-mundane,
h3.ele-magic {
	position: relative;
	margin: 0;
}

@media screen and (width <= #{vars.$width-screen-md}) {
	.list--stats {
		max-height: 20em;
	}
}

@media screen and (device-height <= 700px) {
	.list {
		max-height: 20em;
	}

	.viewport-wrapper {
		bottom: auto;
	}

	.view-col-wrapper {
		flex-direction: column;
		max-height: none;
		height: auto;
	}
}

.itm__list-divider {
	width: 100%;
	height: 1px;
	background: #ccc;
}

.ve-night-mode .itm__list-divider {
	background: #555;
}

.itm__wrp-lists {
	flex: 7;
}

.itm__wrp-stats {
	flex: 5;
}

.itm__wrp-list {
	height: 100%;
}

.itm__wrp-list--empty {
	height: initial;
	flex-shrink: 0;
}

.style-switch__wide .itm__wrp-list {
	min-width: calc(50% - 10px);
	max-width: calc(50% - 10px);
}

.style-switch__wide .itm__wrp-list--mundane {
	margin-right: 20px;
}

.style-switch__wide #listcontainer.itm__wrp-lists {
	flex: initial;
	width: 100%;
	flex-flow: row;
}

.style-switch__wide .itm__wrp-stats {
	width: 480px;
	flex: initial;
	flex-shrink: 0;
}

.style-switch__wide .side-label {
	display: none !important;
}

.style-switch__wide .itm__list-divider {
	display: block !important;
}