@use 'variables';

.header_and_timer {
	position: fixed;
	width: 100vw;
	z-index: 1111;
	background: #eff4f7;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	top: 0;
}

.header-back {
	color: variables.$blue;
	cursor: pointer;
}

.logo {
	display: block;
	width: 100px;
	height: 25px;
	background-image: url('../assets/images/clockify_logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}

.logo-selfhosted {
	display: block;
	width: 100px;
	height: 30px;
	background-image: url('../assets/images/clockify_logo_selfhosted.svg');
	cursor: pointer;
}

.header {
	display: flex;
	justify-content: space-between;
	height: 20px;
	padding: 20px;
	text-align: right;

	&__login-url {
		a {
			color: #03a9f4;
			font-size: 15px;
			cursor: pointer;
		}
	}

	&__break {
		padding-top: 0px;
		margin: 0px;
		border-top: 0px;
		border-bottom: 1px dotted #cacaca;
	}
}

.actions {
	float: right;
	cursor: pointer;
	z-index: 1051;
	width: 20px;
	height: 18px;
	background-image: url('../assets/images/menu.png');

	&:hover {
		width: 20px;
		height: 18px;
		background-image: url('../assets/images/menu-hover.png');
	}
}

.header-offline {
	text-align: center;
	background: variables.$middle_light_text;
	color: white;
}

// background-color: variables.$warning;

.screenshot-notification {
	display: flex;
	flex-direction: column;
	padding: 10px 20px;
	margin: 0px 5px;
	background-color: white;

	&__info_and_close_button {
		display: flex;
		justify-content: space-between;
		color: variables.$middle_light_text;
	}

	&__action_buttons {
		display: flex;
		flex-direction: row-reverse;

		&--help {
			cursor: pointer;
			color: variables.$blue;
			margin-left: 5px;
		}
	}

	&__info {
		width: 90%;
	}

	&__close {
		content: url('../assets/images/closeX.svg');
		width: 10px;
		height: 10px;
	}
}

.debug-info-online {
	background: green;
}

.debug-info-offline {
	background: red;
}

.debug-info {
	z-index: 9999999;
	position: fixed;
	left: 45px;
	top: 120px;
	width: 70%;
	font: bold 1em sans-serif;
	color: #fff;
	padding: 0.5em;
}

.debug-info-log {
	height: 250px;
	overflow-y: auto;
	padding: 2.5em 0.5em 0.5em;
	font: 1em sans-serif;
	background: blue;
}
