@color-half-white: rgba(255, 255, 255, 0.7);
@color-weak-white: rgba(255, 255, 255, 0.4);
@vertical-margin: 20px;

:host {
	.small-font;
}

.margin {
	margin-bottom: @vertical-margin;
}

.small-font {
	font-size: 13px;
	color: @color-half-white;
}

.big-font {
	font-size: 14px;
	color: white;
}

.small-padding-left {
	padding-left: 6px;
}

.wide-underline {
	width: 100%;
	min-height: 1em;
	border-bottom: 1px solid @color-weak-white;
}

.flex-row {
	display: flex;
	align-items: center;
}

.invisible {
	visibility: hidden;
}

/deep/ ansyn-input#ansyn-task-name {
	label {
		.small-padding-left;
		.small-font;
	}

	input {
		.small-padding-left;
		.big-font;
	}
}

ansyn-combo-box {
	/* compensate for the hoisted placeholder */
	padding-top: @vertical-margin;
}

.pin {
	margin-left: 20px;
	background-color: transparent;
	border: none;
	outline: none;
	color: red;
	font-size: 30px;

	&:hover {
		transform: translateX(2px);
	}

	&:active {
		color: black;
	}

	&.done {
		color: green;
	}
}

.two-columns-table > div {
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;

	& > :first-child {
		width: 60%;
	}
}

.run-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.errors {
	color: red;
}
