@use "../../../../style/mixins";

:host {
	display: flex;
	flex: 1;
	flex-direction: row;
	color: var(--main-text-color);
	overflow: hidden;

	.save-button {
		position: fixed;
		right: 50px;
		top: 6px;
	}

	.overlay-save {
		.overlay-popup {
			width: 98%;
			height: 98%;
			max-height: 640px;
			max-width: 640px;
			overflow-y: auto;
		}
	}

	.buttons {
		> span {
			padding-right: 6px;
		}

		.fail {
			color: var(--text-fail-color);
		}

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

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

			&.checked {
				background-color: rgb(0 0 0 / 30%);
				border: 1px solid var(--main-bg-color-lt);
			}

			&.text-button {
				padding: 10px 16px;
			}

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

	.buttons-current-level {
		display: flex;
	}

	.buttonbar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.buttonbar-title {
			padding-left: 12px;
			padding-right: 12px;
		}
	}

	.editor-matrix-list {
		width: 220px;
		max-height: 100%;
		height: 100%;
		border-right: 1px solid var(--dialog-border-color);
		overflow-y: auto;
		background-color: var(--editor-color-bg);

		.matrix-list {
			list-style: none;
			padding: 0;
			margin: 4px;
			max-height: 100%;

			.matrix-level {
				display: flex;
				max-width: 80%;
				margin: 0 auto;
			}

			li {
				text-align: center;
				cursor: pointer;
				border: 1px solid var(--dialog-border-color);
				margin-bottom: 4px;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				&:hover {
					border-color: var(--dialog-border-color-hover);
				}

				&.selected {
					border-color: var(--dialog-border-color-selected);
				}
			}

			span {
				user-select: none;
				display: inline-block;
				min-width: 0.8em;
			}
		}
	}

	.editor-selected {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: auto;

		.editor-commands {
			border-bottom: 1px solid #ececec;
			padding-bottom: 10px;

			> div {
				font-size: 0.9em;
				display: inline-block;
				vertical-align: top;
				margin-right: 10px;
			}

			span {
				cursor: pointer;
				text-decoration: underline;
				user-select: none;
			}
		}

		.matrix-edit {
			height: 100%;
			display: flex;
			flex-direction: column;
			text-align: center;
			max-height: 100%;
			overflow: hidden;

			.matrix-edit-top {
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;

				.matrix-board {
					flex: 1;
					display: flex;
					overflow: hidden;
				}
			}

			.matrix-edit-bottom {
				border-top: 1px solid var(--dialog-border-color);
				height: 25%;
				display: flex;
				flex-direction: column;
				position: relative;
				min-height: 120px;

				.matrix-preview {
					position: relative;
					overflow: hidden;

					.dimensions {
						opacity: 0;
						background-color: rgb(0 0 0 / 70%);
						position: absolute;
						padding: 8px;
						inset: 0;
					}

					&:hover {
						.dimensions {
							opacity: 1;
						}
					}
				}

				.stats {
					position: absolute;
					background-color: rgb(0 0 0 / 70%);
					bottom: 0;
					font-size: 0.9em;
					border-radius: 6px;
					text-align: left;
					padding: 10px;
					font-variant-numeric: slashed-zero tabular-nums;
				}

				.stats-bottom {
					text-align: right;
					right: 0;
				}
			}
		}
	}

	@include mixins.respond-to(medium-down) {
		flex-direction: column;

		.editor-matrix-list {
			height: 80px;
			width: 100%;
			overflow: auto hidden;
			margin-bottom: 2px;
			border-right: none;
			border-bottom: 1px solid var(--dialog-border-color);

			.matrix-list {
				white-space: nowrap;
				border-right: none;
				height: 92%;

				li {
					width: 100px;
					height: 100%;
					display: inline-flex;
				}
			}
		}
	}

	@include mixins.respond-to-horizontal-device(pad) {
		.editor-selected {
			.matrix-edit {
				flex-direction: row;


				.matrix-edit-top {
					max-height: 100%;
				}

				.matrix-edit-bottom {
					height: 100%;
					width: 30%;
					border-top: none;

					.buttons {
						span {
							display: block;
						}
					}
				}
			}
		}

	}

}
