.cidk-header-content {
	display: flex;
	background-color: var(--groupui-sys-color-background-inform);
	color: var(--groupui-sys-color-on-action-quiet-default);
	font-family: var(--groupui-sys-font-family-primary), sans-serif;
	height: var(--groupui-sys-spacing-1800);
	font-weight: var(--groupui-sys-font-weight-normal);

	@media (min-width: 769px) {
		height: var(--groupui-sys-spacing-1600);
	}
}

.header-left-content {
	display: flex;
	align-items: center;
}

.header-right-content {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.header-divider,
.header-language-divider {
	width: var(--groupui-sys-border-width-s);
	height: var(--groupui-sys-spacing-800);
	background-color: var(--groupui-sys-color-action-subtle-pressed-inverse);
}

.header-language-divider {
	display: none;

	@media (min-width: 769px) {
		display: block;
	}
}

.header-vw-logo {
	display: none;

	@media (min-width: 769px) {
		height: calc(
			var(--groupui-sys-spacing-1400) + var(--groupui-sys-spacing-50)
		);
		filter: brightness(0) invert(1);
		display: block;
	}
}

.header-v-logo {
	filter: brightness(0) invert(1);
	margin-left: var(--groupui-sys-spacing-300);
	margin-right: var(--groupui-sys-spacing-300);
	width: var(--groupui-sys-spacing-600);
	height: var(--groupui-sys-spacing-600);

	@media (min-width: 769px) {
		display: none;
	}
}

.obid-logo {
	font-family: var(--groupui-sys-font-family-secondary), sans-serif;
	font-size: var(--groupui-sys-font-size-425);
	font-weight: var(--groupui-sys-font-weight-light);
	padding-left: var(--groupui-sys-spacing-400);
}

.locale-icon {
	display: inline-block;
	width: var(--groupui-sys-spacing-600);
	height: var(--groupui-sys-spacing-600);
	background-color: var(--groupui-sys-color-action-basic-default-inverse);
	color: var(--groupui-sys-color-action-basic-default-inverse) !important;
}

.locale-selector-container {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: var(--groupui-sys-spacing-1400);
	margin-left: var(--groupui-sys-spacing-400);
	margin-right: var(--groupui-sys-spacing-400);

	&:hover {
		background-color: var(--groupui-sys-color-hero-subtle-hover);
	}
	&:active {
		background-color: var(--groupui-sys-color-hero-subtle-pressed);
	}
}

.locale-selector-container:has(.locale-modal--active) {
	.locale-icon {
		background-color: var(--groupui-sys-color-hero-basic-default);
	}
}

.locale-toggle-btn {
	background: none;
	border: none;
	cursor: pointer;
	height: 100%;
	width: 100%;
}

.locale-modal {
	display: none;
	position: absolute;
	top: calc(100% + var(--groupui-sys-spacing-150, 6px));
	background: var(--groupui-sys-color-background-base, #ffffff);
	right: 0;
	border-radius: var(--groupui-sys-border-radius-s);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	z-index: 1000;
	overflow: hidden;
}

.locale-modal.locale-modal--active {
	display: block;
}

.locale-modal .locale-options {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: calc(
		5 * var(--groupui-sys-spacing-1000, 48px) +
			var(--groupui-sys-spacing-400, 12px)
	);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.locale-modal .cidk-header-item__link {
	display: block;
	padding: var(--groupui-sys-spacing-300, 12px)
		var(--groupui-sys-spacing-500, 20px);
	color: var(--groupui-sys-color-content-default, #000000);
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--groupui-sys-font-size-400, 14px);
}

.locale-modal .cidk-header-item__link:hover {
	background: var(--groupui-sys-color-action-subtle-hover, #f5f5f5);
}

.locale-modal .cidk-header-item--selected .cidk-header-item__link {
	font-size: var(--groupui-sys-font-size-400);
	font-weight: var(--groupui-sys-font-weight-bold, 700) !important;
	border-left: var(--groupui-sys-color-navigation-selected-basic-default)
		var(--groupui-sys-border-width-l) solid;
	color: var(--groupui-sys-color-navigation-selected-basic-default);
}