:host {
	overflow-y: auto;
	flex: 1;

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

	.layout-table {
		color: var(--editor-table-row-color);
		width: 100%;

		.layout {
			cursor: pointer;
			background-color: var(--editor-table-row-color-bg);
			height: 80px;

			&:hover {
				background-color: var(--editor-table-row-color-bg-hover);
			}

			> div {
				vertical-align: middle;
				padding: 4px 15px;
				border-top: 1px solid var(--dialog-border-color);
				border-right: 1px solid var(--dialog-border-color);

				.arrow {
					width: 0;
					height: 0;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-bottom: 5px solid var(--main-text-color);
					display: none;
					margin-bottom: 3px;
				}

				&.sortable {
					cursor: pointer;
				}

				&.sort-up {
					.arrow {
						display: inline-block;
					}
				}

				&.sort-down {
					.arrow {
						display: inline-block;
						transform: rotate(180deg);
					}
				}

			}

			.col-image {
				width: 80px;
				height: 80px;
			}

			.col-id {
				font-variant-numeric: slashed-zero tabular-nums;
			}
		}

		.col-test {
			width: 140px;
		}

		.col-cat {
			width: 200px;
		}

		.col-stats {
			width: 140px;
		}

		.col-delete {
			width: 80px;
		}

		.layout-header {
			max-height: 30px;

			> div {
				border-top: none;
			}

			&:hover {
				background-color: rgb(0 0 0 / 10%);
			}
		}

	}

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

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

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

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

}
