/**
 * @file _mixins.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@@
 * @brief Styles und wiederverwendbare Snippets für mehrere Komponenten.
 *
 * Diese Datei enthält wiederverwendbare Snippets, die in mehrere Komponenten
 * eingesetzt werden können.
 */

@use '../utilities/icons';

// Text Base
@mixin text-base {
	color: var(--kern-color-layout-text-default-contextual, #131525);
	font-family: var(--kern-typography-font-family-default, "Fira Sans");
	font-style: normal;
	letter-spacing: var(--kern-metric-space-none, 0px);
}

// Text - Headings
@mixin heading-display {
	@include text-base;
	padding: var(--kern-metric-baseline-heading-display-padding-top, 12px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-display-padding-bottom, 12px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-2x-large-adaptive, 48px);
	font-weight: var(--kern-typography-font-weight-heading-balanced, 500);
	line-height: var(--kern-typography-line-height-2x-large-adaptive, 56px);
}

@mixin heading-x-large {
	@include text-base;
	padding: var(--kern-metric-baseline-heading-x-large-padding-top, 9px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-x-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-x-large-adaptive, 32px);
	font-weight: var(--kern-typography-font-weight-heading-balanced, 500);
	line-height: var(--kern-typography-line-height-x-large-adaptive, 40px);
}

@mixin heading-large {
	@include text-base;
	padding: var(--kern-metric-baseline-heading-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-large-adaptive, 26px);
	font-weight: var(--kern-typography-font-weight-heading-default, 600);
	line-height: var(--kern-typography-line-height-large-adaptive, 32px);
}

@mixin heading-medium {
	@include text-base;
	padding: var(--kern-metric-baseline-heading-medium-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-medium-padding-bottom, 3px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-adaptive, 21px);
	font-weight: var(--kern-typography-font-weight-heading-default, 600);
	line-height: var(--kern-typography-line-height-medium-adaptive, 24px);
}

@mixin heading-small {
	@include text-base;
	padding: var(--kern-metric-baseline-heading-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-static, 18px);
	font-weight: var(--kern-typography-font-weight-heading-default, 600);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

// Text - Title
@mixin title-large {
	@include text-base;
	padding: var(--kern-metric-baseline-title-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-large-adaptive, 26px);
	font-weight: var(--kern-typography-font-weight-title-default, 600);
	line-height: var(--kern-typography-line-height-large-adaptive, 32px);
}

@mixin title-default {
	@include text-base;
	padding: var(--kern-metric-baseline-title-default-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-default-padding-bottom, 3px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-adaptive, 21px);
	font-weight: var(--kern-typography-font-weight-title-default, 600);
	line-height: var(--kern-typography-line-height-medium-adaptive, 24px);
}

@mixin title-small {
	@include text-base;
	padding: var(--kern-metric-baseline-title-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-static, 18px);
	font-weight: var(--kern-typography-font-weight-title-default, 600);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

// Text - Body
@mixin body-large {
	@include text-base;
	padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-large-static, 21px);
	font-weight: var(--kern-typography-font-weight-body-default, 400);
	line-height: var(--kern-typography-line-height-large-static, 32px);
}

@mixin body-default {
	@include text-base;
	padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-static, 18px);
	font-weight: var(--kern-typography-font-weight-body-default, 400);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

@mixin body-small {
	@include text-base;
	padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-small-static, 16px);
	font-weight: var(--kern-typography-font-weight-body-default, 400);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

// Text - Preline
@mixin preline-large {
	@include text-base;
	color: var(--kern-color-layout-text-muted-contextual, #51577A);
	padding: var(--kern-metric-baseline-preline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-large-static, 21px);
	font-weight: var(--kern-typography-font-weight-preline-default, 400);
	line-height: var(--kern-typography-line-height-large-static, 32px);
}

@mixin preline-default {
	@include text-base;
	color: var(--kern-color-layout-text-muted-contextual, #51577A);
	padding: var(--kern-metric-baseline-preline-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-static, 18px);
	font-weight: var(--kern-typography-font-weight-preline-default, 400);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

@mixin preline-small {
	@include text-base;
	color: var(--kern-color-layout-text-muted-contextual, #51577A);
	padding: var(--kern-metric-baseline-preline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-small-static, 16px);
	font-weight: var(--kern-typography-font-weight-preline-default, 400);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

// Text - Subline
@mixin subline-large {
	@include text-base;
	color: var(--kern-color-layout-text-muted-contextual, #51577A);
	padding: var(--kern-metric-baseline-subline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-large-static, 21px);
	font-weight: var(--kern-typography-font-weight-subline-default, 500);
	line-height: var(--kern-typography-line-height-large-static, 32px);
}

@mixin subline-default {
	@include text-base;
	color: var(--kern-color-layout-text-muted-contextual, #51577A);
	padding: var(--kern-metric-baseline-subline-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-static, 18px);
	font-weight: var(--kern-typography-font-weight-subline-default, 500);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

@mixin subline-small {
	@include text-base;
	color: var(--kern-color-layout-text-muted-contextual, #51577A);
	padding: var(--kern-metric-baseline-subline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-small-padding-bottom, 9px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-small-static, 16px);
	font-weight: var(--kern-typography-font-weight-subline-default, 500);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

// Text - Label
@mixin label-large {
	@include text-base;
	padding: var(--kern-metric-baseline-label-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-large-static, 21px);
	font-weight: var(--kern-typography-font-weight-label-default, 600);
	line-height: var(--kern-typography-line-height-large-static, 32px);
}

@mixin label-default {
	@include text-base;
	padding: var(--kern-metric-baseline-label-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-medium-static, 18px);
	font-weight: var(--kern-typography-font-weight-label-default, 600);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

@mixin label-small {
	@include text-base;
	padding: var(--kern-metric-baseline-label-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
	font-size: var(--kern-typography-font-size-small-static, 16px);
	font-weight: var(--kern-typography-font-weight-label-default, 600);
	line-height: var(--kern-typography-line-height-medium-static, 24px);
}

// Icons
@mixin icon-small {
	width: var(--kern-metric-dimension-small, 20px);
	height: var(--kern-metric-dimension-small, 20px);
	min-width: var(--kern-metric-dimension-small, 20px);
	min-height: var(--kern-metric-dimension-small, 20px);
}

@mixin icon-default {
	width: var(--kern-metric-dimension-default, 24px);
	height: var(--kern-metric-dimension-default, 24px);
	min-width: var(--kern-metric-dimension-default, 24px);
	min-height: var(--kern-metric-dimension-default, 24px);
}

@mixin icon-large {
	width: var(--kern-metric-dimension-large, 32px);
	height: var(--kern-metric-dimension-large, 32px);
	min-width: var(--kern-metric-dimension-large, 32px);
	min-height: var(--kern-metric-dimension-large, 32px);
}

@mixin icon-x-large {
	width: var(--kern-metric-dimension-x-large, 48px);
	height: var(--kern-metric-dimension-x-large, 48px);
	min-width: var(--kern-metric-dimension-x-large, 48px);
	min-height: var(--kern-metric-dimension-x-large, 48px);
}

@mixin kern-sr-only {
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;

	// Fix for positioned table caption that could become anonymous cells
	&:not(caption) {
		position: absolute !important;
	}
}

@mixin hint {
	@include body-default;
}

@mixin optional {
	display: flex;
	align-items: center;
	align-content: center;
	gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px);
	align-self: stretch;
	flex-wrap: wrap;
}

@mixin normalize {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

@mixin normalize-media {
	vertical-align: middle;
}

@mixin forced-colors-style {
	@media (forced-colors: active) {
		background-color: var(--kern-color-white) !important;
		forced-color-adjust: none;
	}
}

@mixin forced-colors-focus {
	@media (forced-colors: active) {
		outline: auto !important;
		outline-offset: 4px !important;
		outline-width: 3px !important;
		outline-color: transparent !important;
	}
}

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

@mixin focus {
	outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B);
	outline-offset: 0;
}

@mixin focus-offset {
	outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B);
	outline-offset: 2px;
}