/**
* @file _kopfzeile.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 16.12.2024
* @modified 30.07.2025
* Version: @@VERSION@@
* @brief Styles für die Kopfzeile-Komponente.
*
* Diese Datei enthält die CSS-Regeln, um die Kopfzeile-Komponente
* visuell darzustellen. Sie definiert das Grundaussehen.
*/

@use "sass:map";
@use '../utilities/maps';

.kern-kopfzeile {
	background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);
	padding: var(--kern-component-kopfzeile-padding, 5px) var(--kern-metric-space-none, 0px);

	@media (forced-colors: active) {
		border-bottom: 1px solid transparent;
	}

	&__content {
		display: flex;
		padding: var(--kern-1, 1px) var(--kern-metric-space-none, 0px);
		align-items: center;
		gap: var(--kern-metric-space-small, 8px);
	}

	&__flagge {
		display: flex;
		width: var(--kern-metric-dimension-default, 24px);
		height: var(--kern-metric-dimension-small, 20px);
		padding: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-none, 0px);

		& svg {
			vertical-align: baseline;
			outline: var(--kern-1, 1px) solid #FFFFFF;
		}
	}

	&__label {
		color: var(--kern-color-layout-text-default-contextual, #131525);
		font-family: var(--kern-component-kopfzeile-font-family, "Fira Sans");
		font-style: normal;
		font-weight: 400;
		font-size: var(--kern-component-kopfzeile-font-size, 16px);
		line-height: var(--kern-component-kopfzeile-line-height, 20px);
	}

	// X-Small devices (portrait phones, less than 576px)
	@media only screen and (max-width : map.get(maps.$grid-breakpoints, md)) {
		
		&__flagge {
			width: var(--kern-18, 18px);
			height: var(--kern-16, 16px);
		}

		&__label {
			font-size: var(--kern-14, 14px);
			line-height: var(--kern-16, 16px);
		}

		.kern-container,
		.kern-container-fluid {
			padding-left: var(--kern-metric-space-small, 8px);
			padding-right: var(--kern-metric-space-small, 8px);
		}

	}
}