@color_1: #bbb;

#compendium {
	.directory-footer {
		.compendium-browser-btn {
			margin-top: 5px;
		}
		display: block;
	}
}
.compendium-browser {
	overflow-y: hidden !important;
	max-width: 1100px;
	max-height: 90vh;
	min-width: 630px;
	min-height: 500px;
	.window-content {
		overflow-y: hidden !important;
		height: 100%;
		.parent {
			overflow-y: hidden !important;
			height: 100%;
			.content {
				overflow-y: hidden !important;
				height: calc(100% - 2em);
				.tab {
					overflow-y: hidden !important;
					height: 100%;
					.browser {
						overflow-y: hidden !important;
						height: 100%;
						ul {
							overflow-y: auto;
							overflow-x: hidden;
							height: 100%;
						}
					}
					.settings {
						overflow-y: auto;
						height: 100%;
					}
				}
			}
		}
	}
	.tabs {
		max-height: 2em;
		border-bottom: 1px solid var(--color-border-light-primary);
	}
	.tabContainer {
		height: calc(100% - 2em);
		.tab {
			width: 100%;
			height: 100%;
			overflow: scroll;
		}
	}
	.control-area {
		position: sticky;
		display: block;
		min-width: 250px;
		max-width: 45%;
		width: 350px;
		height: 100%;
		padding-right: 5px;
		overflow: auto;
		button {
			background: rgba(0, 0, 0, 0.05);
			border: 1px solid #bbb;
			border-radius: 5px;
			margin-top: 5px;
			padding: 2px;
		}
		.filtercontainer {
			border: 1px solid #bbb;
			border-radius: 5px;
			margin-top: 5px;
			padding: 2px;
			h3 {
				margin: 0;
				cursor: pointer;
			}
			dl {
				margin: 5px 0;
			}
			div {
				margin: 5px 0;
			}
			dt {
				display: inline-block;
				width: 40%;
				padding-left: 5px;
			}
			dd {
				display: inline-block;
				width: 58%;
				margin-left: 0;
				select {
					width: 100%;
				}
			}
			.multiselect {
				border: 1px solid #bbb;
				border-radius: 3px;
				vertical-align: middle;
				line-height: 32px;
				margin: 2px 0;
				label {
					padding: 5px;
				}
				input {
					vertical-align: middle;
				}
			}
			.small-input {
				width: calc(100% - 44px);
				height: 27px;
				background: rgba(0, 0, 0, 0.05);
				border: 1px solid #444;
				border-radius: 3px;
				padding: 0 3px;
				text-overflow: ellipsis;
			}
			.small-select {
				width: 40px;
			}
		}
	}
	.list-area {
		position: sticky;
		display: flex;
		min-width: 250px;
		max-width: 55%;
		width: 400px;
		height: 100%;
		padding-right: 5px;
		.loading {
			flex: 0;
			text-align: center;
		}
	}
	.browser {
		height: 100%;
		overflow-y: hidden !important;
		.window-content {
			overflow-y: hidden !important;
		}
		ul {
			float: right;
			display: block;
			min-width: 335px;
			margin: 0;
			height: 100%;
			overflow: auto;
			padding-left: 5px;
			.filter-tags {
				display: none;
			}
			li {
				span {
					white-space: nowrap;
					overflow: hidden;
				}
				.spell-tags {
					span.negative {
						color: @color_1;
					}
				}
				.item-name {
					span {
						white-space: break-spaces;
						height: inherit;
						display: block;
					}
				}
				.feat-tags {
					span {
						white-space: break-spaces;
						height: inherit;
						display: block;
					}
				}
			}
		}
		.spacer {
			display: inline-block;
			min-width: 5px;
		}
		.spacer-large {
			display: inline-block;
			min-width: 15px;
		}
	}
	.item-browser {
		li {
			cursor: default;
			vertical-align: middle;
			line-height: 16px;
			margin: 2px 0;
			height: 32px;
			.item-image {
				max-width: 32px;
				height: 32px;
			}
			.item-name {
				padding-left: 5px;
				flex: 2;
			}
			.feat-tags {
				text-align: right;
				margin-right: 3px;
				margin-left: 3px;
				text-transform: capitalize;
				height: 32px;
			}
			.item-tags {
				text-align: right;
				margin-right: 3px;
				margin-left: 3px;
				text-transform: capitalize;
				height: 32px;
			}
		}
	}
	.feat-browser {
		li {
			cursor: default;
			vertical-align: middle;
			line-height: 16px;
			margin: 2px 0;
			height: 32px;
			.item-image {
				max-width: 32px;
				height: 32px;
			}
			.item-name {
				padding-left: 5px;
				flex: 2;
			}
			.feat-tags {
				text-align: right;
				margin-right: 3px;
				margin-left: 3px;
				text-transform: capitalize;
				height: 32px;
			}
			.item-tags {
				text-align: right;
				margin-right: 3px;
				margin-left: 3px;
				text-transform: capitalize;
				height: 32px;
			}
		}
	}
	.spell-browser {
		li {
			cursor: default;
			vertical-align: middle;
			line-height: 16px;
			margin: 2px 0;
			height: 32px;
			.item-image {
				max-width: 32px;
				height: 32px;
			}
			.item-name {
				padding-left: 5px;
				flex: 2;
			}
			.feat-tags {
				text-align: right;
				margin-right: 3px;
				margin-left: 3px;
				text-transform: capitalize;
				height: 32px;
			}
			.item-tags {
				text-align: right;
				margin-right: 3px;
				margin-left: 3px;
				text-transform: capitalize;
				height: 32px;
			}
		}
		.spell {
			.spell-level {
				text-align: center;
				font-weight: 900;
				max-width: 18px;
				height: 32px;
			}
			.spell-tags {
				text-align: right;
				margin-right: 3px;
				font-weight: 900;
				max-width: 100px;
				height: 32px;
			}
		}
	}
	.npc-browser {
		.npc {
			cursor: default;
			vertical-align: middle;
			line-height: 64px;
			margin: 4px 0;
			.npc-image {
				max-width: 64px;
				height: 64px;
				img {
					width: 64px;
					height: 64px;
					border: none;
					object-fit: contain;
				}
			}
			.npc-line {
				line-height: 25px;
				padding: 9px 0 5px 5px;
			}
			.npc-name {
				font-weight: bold;
				font-size: 16px;
			}
			.cr {
				display: inline-block;
				width: 55px;
			}
			.size {
				display: inline-block;
				width: 75px;
			}
			.type {
				display: inline-block;
			}
		}
	}
	.settings {
		.settings-group {
			border: 1px solid #bbb;
			border-radius: 5px;
			margin-top: 5px;
			padding: 2px;
			h3 {
				margin: 0;
				cursor: pointer;
			}
			label {
				display: block;
			}
			h4 {
				display: inline-block;
				vertical-align: middle;
				height: 100%;
			}
		}
	}
}