/**
 * @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-background-hued, #F7F7F9);
	 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, #171A2B);
		 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);
		 }
 
	 }
 }