@use "vars/vars";

@layer vetools {
	.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-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 .itm__wrp-lists {
		flex: initial !important;
		width: 100%;
		flex-flow: row !important;
	}

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

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

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