/**
 * @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 30.07.2025
 * @@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: 10px;
	border-style: solid;
	border-color: var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader);
	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(--semantic-size-xs, 10px);
		background: var(--kern-color-feedback-loader);
		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);
	}
}