.title--components {
	body {
		max-width: none;
	}

	.two-column {
		display: grid;
		grid-template-columns: 1fr 15px min-content;
	}

	.resize-gutter {
		background-color: gray;
		cursor: ew-resize;
		height: 100%;
	}

	.resizable {
		overflow-x: auto;
	}

	transition: transform 200ms, opacity 200ms;
	&.restarting {
		transform: scale(0.99);
		opacity: 0.6;
	}

	.component-preview {
		width: var(--resizable-column-width);

		& > fieldset {
			min-width: 0; /* default is min-content and that causes overflow*/
			max-height: calc(100vh - 75px);
			overflow-x: auto;
		}
	}
	.component-arguments {
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}
}

.component-preview-parameters {
	fieldset {
		background-color: #80808024;

		table {
			td,
			th {
				outline: 0.5px solid #0000006b;

				&.subdued > * {
					opacity: 50%;
				}

				&.subdued:hover > * {
					opacity: 100%;
				}

				&.sticky {
					position: sticky;
					background-color: #ececec;
				}

				&.sticky--left {
					left: 0;
					box-shadow: 5px 0px 10px -4px #00000047;
				}

				&.sticky--top {
					top: 0;
					box-shadow: 0px 5px 10px -4px #00000047;
				}
			}
		}
	}
}

.component-preview {
	* {
		transition: all 150ms;
	}
	container-type: inline-size;
}

@media (scripting: none) {
	body {
		min-width: max-content;
	}
}

.component-preview-size-select {
	margin-left: 10px;
}