@import "../../../styles-variables";
:host {
	position: sticky;
	top: 0;
	overflow: initial;
	display: block;
	background-color: $color-main;
	color: white;
	z-index: 1001;
}
.shadow-container {
	overflow-x: hidden;
	display: flex;
	box-shadow: 0 -2rem 2rem 2rem transparent;
	transition: box-shadow ease-in-out 0.2s;
}
.shadow-container.overflow {
	overflow-x: scroll;
	-ms-overflow-style: none;  // IE 10+
	scrollbar-width: none;  // Firefox
	justify-content: center;
}
.shadow-container.overflow.overflow-max {
	justify-content: flex-start;
}
.shadow-container.overflow::-webkit-scrollbar { 
	display: none;  // Safari and Chrome
}
.shadow-container.sticked {
	box-shadow: 0 -2rem 2rem 2rem #0000006e;
}
:host:after, :host:before {
	content: "";
  display: flex;
  clear: both;
}
.header-logo, .header-logo-space {
	padding: 1rem 0rem;
	text-align: right;
	vertical-align: middle;
	flex: 0 0 6.2rem;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	position: relative;
	top: -5rem;
	color: inherit;
	text-decoration: none;
	transition: opacity ease-in-out 0.4s, top ease-in-out 0s 0.4s;
}
.header-logo.visible {
	opacity: 1;
	pointer-events: initial;
	font-size: initial;
	top: 0;
	transition: opacity ease-in-out 0.3s, top ease-in-out 0.3s;
}
.header-logo-space {
	flex: 0 1 6rem;
}
.header-logo.overflow, .header-logo-space.overflow {
	position: fixed;
	top: 0;
	visibility: hidden;
	pointer-events: none;
}
.header-nav {
	flex: 1 0 auto;
}
.header-nav.overflow {
	flex: 0 0 auto;
}
.header-nav.overflow-max {
	padding-right: 1.5rem;
}
.header-nav a {
	color: inherit;
	text-decoration: none;
	flex: 1 1 100%;
	padding: 0 0.5rem;
}
.header-nav ul {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	display: flex;
	justify-content: center;
}
.header-nav li {
	flex: 0 0 auto;
	text-align: center;
	display: flex;
}
.header-nav span {
	display: block;
	padding: 1rem 0.2rem;
	border-bottom: 0rem solid transparent;
	padding-bottom: 1rem;
	transition: border-bottom-color ease-in-out 0.2s, border-bottom-width ease-in-out 0.2s, padding-bottom ease-in-out 0.2s;
}
.header-nav li:hover span, .header-nav li .force-focus span {
	border-bottom-color: white;
	border-bottom-width: 0.2rem;
	border-bottom-color: white;
	padding-bottom: 0.8rem;
}
.overflow-max-indicator {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	pointer-events: none;
	padding: 1rem 0;
	font-weight: 800;
	width: 2rem;
	text-align: right;
	padding-right: 0.25rem;
  box-shadow: -2rem 0 0.5rem -0.5rem $color-main inset;
}
.overflow-max-indicator.visible {
	opacity: 1;
}