/*
 * Top Bar
**/


.top-bar {
	height: var(--space-48);
	display: flex;
	align-items: stretch;
	position: relative;
}

.top-bar__branding {
	position: relative;
	width: 190px;
}

.top-bar__credit {
	position: absolute;
	top: var(--space-48);
	left: 4px;
	width: 190px;
	text-align: center;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-blue-grey-300);
	pointer-events: auto;
	text-decoration: none;
}

.top-bar__credit strong {
	color: var(--color-blue-grey-50);
	font-weight: 600;
}


.top-bar__logo {
	display: block;
	height: 100%;
	padding: var(--space-6) var(--space-24) var(--space-6) var(--space-6);

	border-right: 1px solid var(--color-blue-grey-700);

	img {
		width: var(--space-160);
		pointer-events: none;
	}
}


.top-bar__main-menu {
	padding: 0 var(--space-20);

	display: flex;
	align-items: center;
	gap: var(--space-8);
}


.top-bar__title.--has-title {
	height: 100%;
	padding: 0 var(--space-20);
	display: flex;
	align-items: center;

	font-size: var(--fontSize-16);
	color: var(--color-grey-100);

	border-left: 1px solid var(--color-blue-grey-700);
}


.top-bar__controls {
	margin-left: auto;
	padding: 0 var(--space-16) 0 var(--space-24);

	display: flex;
	align-items: center;
	gap: var(--space-8);
}





/* Progress */


.top-bar__controls-progress {
	position: relative;
	width: var(--space-32);
	height: var(--space-32);

	border-radius: var(--borderRadius-max);
	mask: radial-gradient(farthest-corner, transparent 12px, black 13px);
}





/* Buttons */


.top-bar__main-menu-button {
	height: var(--space-24);
	width: var(--space-24);

	color: var(--color-blue-grey-400);

	&:hover {
		color: var(--color-yellow-action);
	}

	svg {
		transition: color var(--duration-75) ease-in;
	}
}


.top-bar__button-rounded {
	width: var(--space-32);
	height: var(--space-32);
	border-radius: var(--borderRadius-max);

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--color-blue-grey-50);
	background-color: var(--color-blue-grey-700);
	transition:
		color var(--duration-75) ease-in,
		background-color var(--duration-75) ease-in;

	&:hover {
		color: var(--color-blue-grey-900);
		background-color: var(--color-yellow-action);
	}

	&.--is-active {
		color: var(--color-blue-grey-900);
		background-color: var(--color-yellow-action);
	}

	svg {
		width: var(--space-16);
		height: var(--space-16);

		transition: color var(--duration-75) ease-in;
	}
}


.top-bar__separator {
	height: 100%;
	width: 1px;
	margin: 0 var(--space-8);

	background-color: var(--color-blue-grey-700);
}


.top-bar__controls-connect {
	display: flex;
	align-items: center;

	.top-bar__controls-connect-label {
		margin: 0 var(--space-6) 0 var(--space-8);

		font-size: var(--fontSize-14);
		color: var(--color-blue-grey-50);
	}

	.top-bar__controls-connect-dropdown {
		color: var(--color-blue-grey-500);
		transition: color var(--duration-75) ease-in;
	}

	&:hover {
		cursor: pointer;

		.top-bar__button-rounded {
			color: var(--color-blue-grey-900);
			background-color: var(--color-yellow-action);
		}

		.top-bar__controls-connect-dropdown {
			color: var(--color-yellow-action);
		}
	}


	/* Connected */
	&.--is-connected {

		.top-bar__button-rounded {
			color: var(--color-blue-grey-900);
			background-color: var(--color-boolean-green);
		}
	}
}


.top-bar__controls-run {
	width: var(--space-24);
	height: var(--space-24);

	color: var(--color-yellow-action);
	transition: color var(--duration-75) ease-in;

	&:hover {
		color: var(--color-yellow-action--hover);
	}
}


.top-bar__controls-stop {
	width: var(--space-24);
	height: var(--space-24);

	color: var(--color-blue-grey-700);
	transition: color var(--duration-75) ease-in;

	&:hover {
		color: var(--color-boolean-red--hover);
	}
}