@import "/ui/styles/_theme.scss";

slidercontrol {
	min-height: 22px;

	> .inner {
		min-height: 22px;

		> .track {
			background-color: $bg-2;
			height: 4px;
			margin: 6px 0;
			border-radius: 0;

			> .track-active {
				background-color: $accent;
				border-radius: 0;
			}

			> .thumb {
				background-color: $accent;
				width: 10px;
				height: 14px;
				border-radius: 0;
				border: 1px solid $accent-ink;
			}
		}
	}

	.value-tooltip > .label {
		background-color: $accent;
		color: $accent-ink;
		font-family: $font-mono;
		font-size: $fs-2;
		font-weight: 700;
		border-radius: 0;
		letter-spacing: 0.5px;
	}
}

textentry {
	background-color: $bg-2;
	border: 1px solid $line-strong;
	color: $text;
	padding: 0 11px;
	font-size: $fs-2;
	font-family: $font-secondary;
	min-height: $dock-input-h;
	height: $dock-input-h;
	transition: border-color 0.1s ease;

	&:hover { border-color: $accent; }
	&:focus, &.has-focus { border-color: $accent; }

	&.is-multiline { min-height: 96px; height: auto; padding: 9px 11px; }

	&.json {
		font-family: $font-mono;
		font-size: $fs-2;
		min-height: 120px;
		height: auto;
		padding: 9px 11px;
	}

	> .content-label {
		color: $text;
	}
}

select {
	background-color: $bg-2;
	border: 1px solid $line-strong;
	color: $text;
	padding: 0 11px;
	font-size: $fs-2;
	font-family: $font-secondary;
	height: $dock-input-h;
	min-height: $dock-input-h;
	cursor: pointer;

	&:hover { border-color: $accent; }
}

checkbox {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	cursor: pointer;
	margin-top: 2px;

	> .checkmark {
		flex-grow: 1;
		opacity: 0;
		background-color: $accent;
	}

	&.checked > .checkmark { opacity: 1; }
	&:hover { border-color: $accent; }
}