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

$v3-axis-x:      rgba(220, 70, 70, 0.85)  !default;
$v3-axis-y:      rgba(110, 180, 70, 0.85) !default;
$v3-axis-z:      rgba(70, 130, 220, 0.85) !default;
$v3-axis-yaw:    $v3-axis-x !default;
$v3-axis-pitch:  $v3-axis-y !default;
$v3-axis-roll:   $v3-axis-z !default;

.v3-cell {
	pointer-events: all;
	flex-direction: row;
	align-items: stretch;
	flex-grow: 1;
	flex-basis: 0;
	min-width: 70px;
	height: $dock-input-h;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	transition: border-color 0.1s ease;
	overflow: hidden;

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

	.v3-tag {
		min-width: 22px;
		max-width: 64px;
		padding: 0 6px;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		font-family: $font-mono;
		font-size: $fs-2;
		font-weight: 800;
		color: $text;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		cursor: ew-resize;
	}

	&.is-scrubbing {
		border-color: $accent;

		.v3-tag {
			background-color: $accent;
			color: $accent-ink;
			font-size: $fs-3;
		}
	}

	textentry {
		flex-grow: 1;
		min-width: 0;
		background-color: transparent;
		border: 0;
		padding: 0 8px;
		font-size: $fs-2;
		font-family: $font-mono;
		color: $text;
		height: auto;
		min-height: 0;

		&:hover, &:focus, &.has-focus { border: 0; }

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

	.v3-readout {
		flex-grow: 1;
		min-width: 0;
		padding: 0 8px;
		font-size: $fs-2;
		font-family: $font-mono;
		color: $text;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		cursor: ew-resize;
	}

	&.axis-x .v3-tag      { background-color: $v3-axis-x; }
	&.axis-y .v3-tag      { background-color: $v3-axis-y; }
	&.axis-z .v3-tag      { background-color: $v3-axis-z; }
	&.axis-yaw .v3-tag    { background-color: $v3-axis-yaw; }
	&.axis-pitch .v3-tag  { background-color: $v3-axis-pitch; }
	&.axis-roll .v3-tag   { background-color: $v3-axis-roll; }
}