@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/density";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/internal/component";

.db-header {
	background-color: colors.$db-adaptive-bg-basic-level-1-default;
	display: flex;
	flex-direction: column;
	position: relative;
	min-block-size: component.$min-mobile-header-height;
	border-block-end: variables.$db-border-height-3xs solid
		colors.$db-adaptive-on-bg-basic-emphasis-60-default;

	@include screen-sizes.screen("md") {
		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
	}

	&[data-width="medium"] {
		margin-inline: auto;
		max-inline-size: screen-sizes.$db-breakpoint-md;
	}

	&[data-width="large"] {
		margin-inline: auto;
		max-inline-size: screen-sizes.$db-breakpoint-lg;
	}

	.db-link {
		display: inline-block;
	}

	&[data-on-forcing-mobile="true"] {
		/*
		We make the header invisible for a short time if the user passes in data-force-mobile property.
		We do it because otherwise we see the default desktop-navigation for some mil. sec.
		*/
		visibility: hidden;
	}

	// All use-cases where we hide the divider
	&:has(.db-header-navigation:empty),
	&:has(.db-brand:empty) {
		.db-header-navigation-container::before {
			display: none;
		}
	}
}

.db-header-navigation-bar {
	display: flex;
	position: relative;
	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
	inline-size: 100%;
	align-items: center;

	@include screen-sizes.screen("md") {
		padding: variables.$db-spacing-fixed-md variables.$db-spacing-fixed-lg;
	}
}

.db-header-meta-navigation {
	@extend %db-density-functional;

	@include helpers.divider("top");

	display: flex;
	flex-direction: column;
	gap: variables.$db-spacing-fixed-sm;
	justify-content: flex-end;
	background-color: colors.$db-adaptive-bg-basic-level-2-default;
	padding: variables.$db-spacing-fixed-md;

	@include screen-sizes.screen("md") {
		padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
		margin: 0;
		gap: variables.$db-spacing-fixed-md;
		flex-direction: row;

		&::before {
			display: none;
		}

		&:empty {
			display: none;
		}
	}

	&:empty {
		display: none;
	}
}

.db-header-navigation-container {
	display: inherit;
	flex: 1 1 auto;
	inline-size: 100%;
	align-items: center;
	block-size: 100%;

	@include screen-sizes.screen("md") {
		@include helpers.divider("left");

		&::before {
			position: inherit;
			block-size: variables.$db-sizing-md;
			margin-inline-start: variables.$db-spacing-fixed-lg;
		}
	}
}

.db-header-primary-action {
	margin-inline-start: auto;
}

.db-header-brand-container:not(:has(> :nth-child(1))) {
	display: none;
}

.db-header-action-container:has(> .db-header-secondary-action:empty) {
	@include screen-sizes.screen("md") {
		display: none;
	}
}

.db-header-brand-container {
	min-block-size: variables.$db-sizing-md;
}

.db-header-action-container {
	@include helpers.divider("left");

	@include screen-sizes.screen("md") {
		&::before {
			margin-inline: variables.$db-spacing-fixed-sm;
		}
	}

	&::before {
		margin-inline: variables.$db-spacing-fixed-xs;
		position: inherit;
		block-size: variables.$db-sizing-md;
	}
}

.db-header-brand-container,
.db-header-action-container {
	align-items: center;
	block-size: 100%;
	display: inherit;
	gap: inherit;
	flex: 0 1 auto;
	flex-grow: 0;
	flex-shrink: 0;
}

.db-header-secondary-action {
	@include helpers.divider("top");

	flex: 0 1 auto;
	flex-grow: 0;
	flex-shrink: 0;
	padding-block-start: variables.$db-spacing-fixed-xs;

	@include screen-sizes.screen("md") {
		&::before {
			display: none;
		}
	}
}

.db-header-drawer-navigation {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	block-size: 100%;
	overflow: auto;
	justify-content: space-between;
}

.db-header-navigation {
	padding-block: variables.$db-spacing-fixed-md;

	@include screen-sizes.screen("md") {
		margin-inline: variables.$db-spacing-fixed-lg;
	}
}

.db-header-navigation,
.db-header-secondary-action {
	display: flex;
	gap: variables.$db-spacing-fixed-sm;
	padding-inline: variables.$db-spacing-fixed-md;

	@include screen-sizes.screen("md") {
		gap: variables.$db-spacing-fixed-xs;
		padding: 0;
	}
}

.db-header-drawer {
	--db-drawer-content-padding-inline: 0;
	// 1px for box shadow of header
	--db-drawer-header-padding-block-end: calc(
		1px + #{variables.$db-spacing-fixed-xs}
	);

	padding-block-end: 0;

	.db-drawer-content {
		display: flex;
		flex-direction: column;
		block-size: 100%;
		overflow: hidden;
	}
}

/* Only for Desktop */
.db-header-meta-navigation,
.db-header-navigation-container > .db-header-navigation,
.db-header-action-container > .db-header-secondary-action {
	display: none;

	@include screen-sizes.screen("md") {
		display: inherit;
	}
}

/* Only for Mobile */
.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
	display: inherit;
}

.db-header-drawer,
.db-header-burger-menu-container {
	@include screen-sizes.screen("md") {
		display: none;
	}
}