@use "../kit-deps" as *;
@use "typography" as *;

/* HTML: <div class="loader"></div> */
.loader {
  width: $icon-size-xl;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#FF3C00 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: l12 1s infinite;
}
@keyframes l12 {
 0%,100%{background-size:20% 50%}
 16.67% {background-size:20% 30%, 20% 30%, 20% 50%, 20% 50%, 20% 50%, 20% 50%}
 33.33% {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 50%, 20% 50%}
 50%    {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 66.67% {background-size:20% 50%, 20% 50%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 83.33% {background-size:20% 50%, 20% 50%, 20% 50%, 20% 50%, 20% 30%, 20% 30%}
}

.circle-loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: $space-2;
      
  .ph, .ph-bold {
    font-size: $icon-size-lg;
    transform-origin: 50% 50%;
    animation: icon_spin 1.2s linear infinite;
  }
}

.progress {
	display: flex;
	flex-direction: column;
	gap: $space-2;
	width: 100%;
	max-width: 640px;

	.progress-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: $space-3;
		color: $color-text-medium;
		font-size: $font-size-sm;
		font-weight: $font-weight-semibold;
		text-transform: uppercase;
	}

	.progress-value {
		color: $color-text-light;
		font-family: $font-family-code;
	}

	.progress-track {
		position: relative;
		width: 100%;
		height: 18px;
		overflow: hidden;
		border: $border-width-base solid $border-color-muted;
		background: $surface-panel-muted;
	}

	.progress-bar {
		display: block;
		position: relative;
		overflow: hidden;
		width: var(--progress-value, 0%);
		height: 100%;
		background: $color-secondary;
		transition: width $motion-slow $motion-ease;
	}

	&.progress-success .progress-bar {
		background: $color-success;
	}

	&.progress-warning .progress-bar {
		background: $color-warning;
	}

	&.progress-danger,
	&.progress-error {
		.progress-bar {
			background: $color-error;
		}
	}

	&.progress-striped .progress-bar {
		background-image: repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 14px,
			rgba($color-black, 0.2) 14px,
			rgba($color-black, 0.2) 16px
		);
	}

	&.progress-animated .progress-bar::after {
		content: "";
		position: absolute;
		inset: 0;
		width: 48%;
		background: linear-gradient(
			90deg,
			transparent,
			rgba($color-text-light, 0.28),
			transparent
		);
		transform: translateX(-120%);
		animation: progress_scan 1.4s $motion-ease infinite;
	}
}

.usage-meter {
	display: grid;
	gap: $space-3;
	width: 100%;
	max-width: 420px;
	padding: $space-4;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;

	.usage-meter-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: $space-3;
		margin: 0;
		font-size: $font-size-lg;
		font-weight: $font-weight-bold;
		line-height: $line-height-base;
		text-transform: uppercase;
	}

	.usage-meter-value {
		color: $color-secondary;
		font-family: $font-family-code;
		font-size: $font-size-sm;
	}

	.usage-meter-meta {
		margin: 0;
		color: $color-text-medium;
		font-size: $font-size-sm;
		line-height: $line-height-normal;
	}
}

.progress-stages {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: $space-2;
	width: 100%;
	max-width: 720px;

	.progress-stage {
		min-height: 42px;
		padding: $space-2 $space-3;
		border: $border-width-base solid $border-color-muted;
		color: $color-text-dark;
		background: $surface-panel-muted;
		font-size: $font-size-sm;
		font-weight: $font-weight-semibold;
		line-height: $line-height-normal;
		text-transform: uppercase;
	}

	.progress-stage-complete {
		color: $color-black;
		background: $color-success;
		border-color: $color-success;
	}

	.progress-stage-current {
		color: $color-black;
		background: $color-warning;
		border-color: $color-warning;
	}
}

@include media_down("md") {
	.progress-stages {
		grid-template-columns: 1fr 1fr;
	}
}

@include media_down("sm") {
	.progress-stages {
		grid-template-columns: 1fr;
	}
}

@keyframes progress_scan {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(220%);
	}
}