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

.kern-loader {
	display: none;
	box-sizing: border-box;
	border-width: var(--kern-10, 10px);
	;
	border-style: solid;
	border-color: var(--kern-color-feedback-default-background-contextual, #DFE1EA) var(--kern-color-feedback-default-background-contextual, #DFE1EA) var(--kern-color-feedback-default-background-contextual, #DFE1EA) var(--kern-color-feedback-default-contextual, #454B6B);
	width: var(--kern-metric-dimension-5x-large, 96px);
	height: var(--kern-metric-dimension-5x-large, 96px);
	border-radius: 50%;
	animation: rotation 1.5s linear infinite;
	position: relative;

	@media (forced-colors: active) {
		border-color: var(--kern-color-layout-background-default) var(--kern-color-layout-background-default) var(--kern-color-layout-background-default) var(--kern-color-layout-background-inverted);
		forced-color-adjust: none;
		outline-color: transparent;
		box-shadow: 0 0 0 1px var(--kern-color-layout-background-inverted),
			inset 0 0 0 1px var(--kern-color-layout-background-inverted);
	}

	&:before,
	&:after {
		content: '';
		height: var(--kern-10, 10px);
		background: var(--kern-color-feedback-default-contextual, #454B6B);
		position: absolute;
	}

	&:before {
		width: var(--kern-metric-border-radius-small, 2px);
		border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-space-none, 0px);
		left: var(--kern-7, 7px);
		top: var(--kern-metric-space-2x-small, 2px);
		transform: rotate(-45deg);
	}

	&:after {
		width: var(--kern-metric-border-radius-small, 2px);
		border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-space-none, 0px);
		left: var(--kern-7, 7px);
		bottom: var(--kern-metric-space-2x-small, 2px);
		transform: rotate(45deg);
	}

	&--visible {
		display: block;
	}
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}