Widget {
	height: auto;
}

Screen {
	overflow: hidden hidden;
}

CellTextArea {
	height: auto;
	width: 1fr;
	& > Completer {
		width: auto;
		display: block;
		overlay: screen;
		max-height: 10;
		border: none;
		constrain: none inside;

		&.hidden {
			display: none;
		}
	}

	& > Inspect {
		& > Static {
			width: auto;
		}
		width: auto;
		max-width: 100vw;
		overlay: screen;
		max-height: 12;
		border: tall $border-blurred;
		constrain: inside inside;

		&.hidden {
			display: none;
		}
	}
}

Cell {
	layout: vertical;
	padding-left: 1;
	padding-right: 1;

	TextArea {
		border: none;
		padding: 0;
	}

	Markdown {
		background: transparent;
		padding: 0;
	}

	Static {
		width: auto;
	}

	Output {
		min-width: 1fr;
		width: auto;
		&.stderr {
			background: maroon;
		}
	}

	Counter {
		width: 10;
		content-align: right top;
		max-height: 1;
		text-wrap: nowrap;
		margin: 0 1 0 0;

		&.input {
			color: mediumblue;
		}

		&.output {
			color: tomato;
		}
	}

	.hidden {
		display: none;
	}

	&.focused {
		margin: 0;
		padding: 0;
		border-left: double dodgerblue;
		border-right: double dodgerblue;
		border-top: double dodgerblue;
		border-bottom: double dodgerblue;
		&.input_focused {
			border-left: double green;
			border-right: double green;
			border-top: double green;
			border-bottom: double green;
		}
	}

	&.below_focused {
		padding: 0 1 1 1;
	}

	&.above_focused {
		padding: 1 1 0 1;
	}

	&.multiselect {
		background: midnightblue;
	}

	Container.codeoutput.collapsed {
		height: 1;
		Button {
			height: 1;
			border: none;
			width: 100%;
			background: transparent;

			&:hover {
				background: $surface;
			}
		}

		Horizontal {
			display: none;
		}
	}

	Container.codeoutput.noncollapsed {
		Button {
			display: none;
		}

		DoubleClickButton {
			display: block;
			min-width: 10;
			width:10;
			min-height: 0;
			margin: 0;
			border: none;
			height: 100%;
			text-align: right;
			content-align: right top;
			text-style: none;
			color: tomato;
			margin: 0 1 0 0;
			background: transparent;

			&:hover {
				background: $surface;
			}
		}

		&.scrolled {
			overflow: scroll scroll;
			max-height: 18;
			/* width: auto; */
			Horizontal {
				width: auto;
			}
			Vertical {
				width: auto;
			}
			HorizontalScroll {
				width: auto;
			}
		}
	}

}

.mainscroll {
	width: 100%;
	height: 1fr;
	overflow: auto auto;
}

.toolbar {
	height: auto;
	dock: top;
	background: $panel;
	layout: horizontal;
	align-vertical: middle;

	Button {
		/* background: $foreground 10%; */
		background: $panel;
		width: auto;
		min-width: 5;
		height: 3;
		border: round grey;
		margin: 0;

		&:hover {
			background: $panel-darken-1;
		}
	}

	Static {
		width: auto;
	}

	Select {
		width: auto;
	}

	.spacer {
		width: 1fr;
	}

	.title {
		padding: 1;
		width: auto;
	}

	SelectCurrent {
		width: 12;
		border: round grey;
		padding: 0;
		margin: 0;
		background: $panel;

		&:hover {
			background: $panel-darken-1;
		}
	}

	SelectOverlay {
		width: auto;
		border: none;
	}
}

HelpPanel {
	overflow-y: auto;
}

