dtx-data-scrapers {
	display: flex;
	height: 100vh;
	padding: 80px 2px 0 12px;
}

dtx-data-scrapers-details {
	> dialog { width: 66vw; }
	dtx-radio-group { margin: 0 auto 24px; }
	dtx-tab-page { display: contents; }

	#results-tab:has(#results-nav:empty) {
		pointer-events: none;
		> * { opacity: 0; }

		&::before {
			content: 'Fill the form in the `Configuration` tab, then press `Collect Data` to view the results';
			text-align: center;
			font-size: 12px;
		}
	}

	flex-row {
		flex-grow: 1;
		display: flex;
		border-radius: 12px;
		border: 1px solid var(--border);

		#results-nav {
			width: 33%;
			padding: 4px;
			border-right: 1px solid var(--border);

			li {
				display: flex;
				flex-direction: column;
				gap: 4px;
				padding: 8px;
				padding-left: calc(var(--depth) * 12px + 8px);
				border-radius: 8px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				cursor: pointer;
				transition: .2s;

				small {
					font-size: 12px;
					font-family: monospace;
					text-overflow: ellipsis;
					overflow: hidden;
					opacity: .5;
				}

				&:active { scale: .97 .9; }
				&.active { background: var(--border); }
			}
		}

		textarea {
			flex-grow: 1;
			padding: 12px;
			border-radius: 0 10px 10px 0;
			border: none;
			background: transparent;
			line-height: 1.25;
			resize: none;
		}
	}

	dialog-footer {
		margin: auto -20px 0;
		padding-top: 8px !important;
	}
}