// todo refactor whole "_logo" file and style: dont name it "logo" better alv or work or whatever
//
// todo shadow > material design whiteframe: https://material.angularjs.org/latest/demo/whiteframe!
.logo-box,
.alv-logo-box {
	height: 100%;
	width: 100%;

	background-color: $main-color-gray-100;
	display: block;
	overflow-wrap: break-word;

	@include alv-border-radius($alv-box-radius);

	padding: $alv-box-padding;
	margin-bottom: $margin-x-general;

	&.flex-height {
		height: auto;
	}

	&.flex-width {
		width: auto;
	}
}

.base__subnavbar .alv-logo-box {
	font-size: $small-font-size;
}

// bootstrap class: borders!!
.rounded-logo {
	@include alv-border-radius($alv-box-radius);
}

.alv-logo {
	@media screen and (min-width: 768px){
		height: $logo-height;
		width: calc(#{$logo-height} * #{$phi});

		font-weight: 300;

		background: $additional-accent-amber;
		color: $black;
		display: inline-block;

		@include alv-border-radius($alv-box-radius);

		padding: ($alv-box-padding/3) $alv-box-padding;

		-webkit-box-shadow: 10px 5px 20px 10px rgba(0,0,0,0.05);
		-moz-box-shadow: 10px 5px 20px 10px rgba(0,0,0,0.05);
		box-shadow: 10px 5px 20px 10px rgba(0,0,0,0.05);
	}
}

.alv-logo__brand--amstat,
.alv-logo__brand--job-room {
	font-size: $logo-brand-size;
	letter-spacing: $logo-brand-spacing;

	display: block;
	text-align: right;

	~.alv-logo__title-small {
		text-align: right;
		line-height: .5;
	}

	@media screen and (max-width: 767px){
		color: $brand-primary;
		letter-spacing: initial;

		~.alv-logo__title-small {
			display: none;
		}
	}
}

.alv-logo__brand--amstat {
	letter-spacing: initial;

	@media screen and (max-width: 767px){
		color: $main-color-gray-dark;
		display: inline;
	}
}

.alv-logo__title {
	font-size: $logo-size;
	font-weight: 400;
	letter-spacing: $logo-spacing;

	.title__plus-ch,
	.title__plus-ch:before {
		color: $main-color-gray;
	}

	@media screen and (max-width: 767px){
		color: $additional-accent-amber;
	}
}

.alv-logo__title-small {
	color: $black;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: $text-h4-spacing;

	.title__plus-ch {
		font-weight: 300;
	}

	.title__plus-ch,
	.title__plus-ch:before {
		color: $main-color-gray;
	}

	~.alv-logo__brand {
		font-size: $logo-brand-size;
		font-weight: 300;
	}
}

.title__plus-ch:before {
	content: '+';
	font-weight: 700;
	font-size: 0.75em;

	vertical-align: -0.5em;
	margin-left: -0.1em;
	margin-right: -0.2em;
}


.alv-logo--inverse {
	@media screen and (min-width: 768px){
		background: $brand-primary;
		color: $white !important;

		.alv-logo__title,
		.alv-logo__title-small,
		.title__plus-ch,
		.title__plus-ch:before {
			color: $white;
		}
	}
}

.alv-logo--dark {
	@media screen and (min-width: 768px){
		background: $main-color-gray-dark;
		color: $white !important;

		.alv-logo__title,
		.alv-logo__title-small,
		.title__plus-ch,
		.title__plus-ch:before {
			color: $white;
		}
	}
}

// portal-logo
/*
	<a class="navbar-brand alv-logo" href="./{{baseurl}}/index.html">
		<div class="alv-logo__title">
			<strong>arbeit</strong><span class="title__plus-ch">swiss</span>
		</div>
	</a>
 */

.navbar-brand.portal-logo {
	@media screen and (min-width: 768px){
		position: absolute;
		top: 0;
		z-index: $logo-zIndex;

		height: $logo-height;
		width: $logo-width;

		font-weight: 300;

		background: $white;
		color: $black;
		display: inline-block;

		@include alv-border-radius($alv-box-radius);

		padding: 0 $alv-box-padding;

		box-shadow: $whiteframe-shadow-1dp;

		.portal-logo__image {
			height: 100%;
			width: 100%;
		}
	}

	@media screen and (max-width: 767px){
		.portal-logo__image img {
			display: none;
		}
	}
}