:host {
	max-width: min(calc(100% - 0.5rem), 48rem);
	margin: auto;
}

:host h2,
:host p {
	margin: .5rem 0;
}
:host > .description {
	--smoothly-form-input-min-width: 18rem;
}
:host smoothly-input-range[name=borderRadius] {
	flex-basis: 100%;
}
div.input-wrapper {
	display: grid;
	margin-top: 1rem;
	grid-template-columns: 1fr 9rem;
	gap: 1rem;
	position: relative;
	justify-content: space-around;
}
div.input-wrapper > [name] {
	grid-column: 1 / 2;
}
div.input-wrapper > .width {
	width: 100%;
	text-align: center;
	border-bottom: 1px dashed black;
}
div.input-wrapper > .height {
	align-content: center;
	grid-column: 2 / 3;
	border-left: 1px dashed black;
	padding-left: 1rem;
	content: "hello";
}
div.input-wrapper > .left-padding {
	width: 0.5rem;
	grid-column: 1 / 2;
	white-space: nowrap;
	overflow: visible;
	position: relative;
	cursor: default;
}
div.input-wrapper > .left-padding::before {
	content: "";
	position: absolute;
	width: 100%;
	top: 1.5rem;
	bottom: -1rem;
	border: 1px  dashed black;
	z-index: 2;
}
div.input-wrapper > .left-padding:hover::before { 
	bottom: -100vh;
}