:host {
	--editor-table-row-color: #fff;
	--editor-color-bg: #1e2e37;
	--editor-table-row-color-bg: #1e2e37;
	--editor-table-row-color-bg-hover: #2b424f;

	position: absolute;
	inset: 0;
	background-color: var(--editor-color-bg);
	z-index: 10001;

	a {
		color: var(--main-content-link-color);
		cursor: pointer;

		&:hover {
			color: var(--main-content-link-hover-color);
		}
	}

	.close {
		position: absolute;
		right: 10px;
		top: 8px;
		cursor: pointer;
	}

	.buttons {
		text-align: center;

		button {
			background-color: transparent;
			background-image: none;
			border: 1px solid var(--main-bg-color-dk);
			cursor: pointer;
			font-size: 1em;
			color: var(--text-highlight-color);
			padding: 2px 16px;

			&:hover {
				color: var(--main-text-color-hover);
				border: 1px solid var(--main-text-color-hover);
			}

			&[disabled] {
				color: var(--text-disabled-color);
				cursor: default;
			}
		}
	}

	.editor-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		> div {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.editor-manager {
			display: none;

			&.visible {
				display: flex;
			}
		}

		.editor-nav {
			padding: 4px 8px 8px;
			border-bottom: 1px solid var(--dialog-border-color);

			ul {
				padding: 0;
				margin: 0 40px 0 0;
				list-style: none;
				display: flex;

				li {
					color: white;
					font-size: 1.3em;
					padding-left: 8px;

					&.sep {
						flex: 1;
					}

					&.active {
						color: yellow;
						cursor: default;
					}
				}

			}
		}

		.editor-main {
			flex: 1;
			display: flex;
			overflow: hidden;

			.editor-select {
				.editor-wrapper {
					text-align: center;
					width: 100%;
					max-width: 800px;

					button {
						margin-bottom: 30px;
						padding: 10px;
					}
				}

				.layout-selects {
					height: 430px;
					max-width: 800px;
					margin-top: 20px;
					display: flex;
				}

				.layout-list {
					border: 1px solid var(--dialog-border-color);
					border-radius: 6px;
					text-align: left;
					width: 50%;
					overflow-y: hidden;
					color: var(--main-text-color);
					display: flex;
					flex-direction: column;

					.by {
						font-size: 0.7em;
					}

					> div {
						border-bottom: 1px solid var(--dialog-border-color);
						padding: 4px 8px;
						display: flex;

						span {
							flex: 1;
						}
					}

					ul {
						flex: 1;
						margin: 0;
						padding: 0;
						overflow-y: auto;
					}

					li {
						color: var(--main-text-color);
						padding: 4px;
						border-bottom: 1px solid var(--dialog-border-color);
						cursor: pointer;

						&:hover {
							background-color: rgb(255 255 255 / 5%);
						}

						a {
							float: right;
						}

						.svg-board {
							height: 30px;
							width: 40px;
							margin-right: 6px;
							display: inline-block;
							vertical-align: middle;
						}
					}
				}

			}

		}
	}
}

