/*------------------------------------*\
	#COMPONENTS
\*------------------------------------*/

/*= Loader =*/

.loader
{
	flex-grow: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--spacing-dmd);
	justify-items: center;
	margin: auto;

	font-family: var(--font-family-accent);
	font-size: var(--font-size-dlg);
	color: var(--color-success);
	text-shadow: 0 0 1px var(--color-muted);

	& > i
	{
		--croc: radial-gradient(farthest-side,#000 94%,#0000);

		display: block;
		height: 20vh;
		aspect-ratio: 0.4;

		padding: .6rem .4rem;
		border-radius: .8rem;
		border: 2px solid #bb6531;
		
		background-color: var(--color-primary);
		background: repeating-linear-gradient(transparent 0 2vh, #0004 0 3vh) content-box, 
			radial-gradient(var(--color-primary)) padding-box;
		mask: linear-gradient(#000 0 0),
			var(--croc) -2.5vh -2.5vh,
			var(--croc)  3.75vh -3.5vh,
			var(--croc)   2.25vh -1.5vh,
			var(--croc) -3vh  2.25vh,
			var(--croc)  3.5vh  2.25vh,
			var(--croc)  6vh 6.75vh,
			var(--croc)  -2vh 8vh,
			var(--croc)   50% 50%,
			linear-gradient(#0000 0 0);
		mask-composite: exclude,add,add,add,add,add,add,add,add;
		mask-repeat: no-repeat;
		animation: croc 8s infinite;
	}

	& > p
	{
		clip-path: inset(0 1ch 0 0);
		animation: blink 4s linear infinite alternate;
	}
	

}

@keyframes blink {to{opacity: 0}}

@keyframes croc
{
	0%   {mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
	10%  {mask-size: auto,8vh 8vh,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
	20%  {mask-size: auto,8vh 8vh,8vh 8vh,0 0,0 0,0 0,0 0,0 0,0 0}
	30%  {mask-size: auto,8vh 8vh,8vh 8vh,10vh 10vh,0 0,0 0,0 0,0 0,0 0}
	40%  {mask-size: auto,8vh 8vh,8vh 8vh,10vh 10vh,10vh 10vh,0 0,0 0,0 0,0 0}
	50%  {mask-size: auto,8vh 8vh,8vh 8vh,10vh 10vh,10vh 10vh,8vh 8vh,0 0,0 0,0 0}
	60%  {mask-size: auto,8vh 8vh,8vh 8vh,10vh 10vh,10vh 10vh,8vh 8vh,8vh 8vh,0 0,0 0}
	70%  {mask-size: auto,8vh 8vh,8vh 8vh,10vh 10vh,10vh 10vh,8vh 8vh,8vh 8vh,8vh 8vh,0 0}
	80%  {mask-size: auto,8vh 8vh,8vh 8vh,10vh 10vh,10vh 10vh,8vh 8vh,8vh 8vh,8vh 8vh,20vh 20vh}
	100% {mask-size: auto,8vh 8vh,8vh 8vh,10vh 10vh,10vh 10vh,8vh 8vh,8vh 8vh,8vh 8vh,25vh 25vh}
}



/*= TimePicker =*/

.time-picker
{
	overflow-x: hidden;

	& > input
	{
		margin-inline: 0;
		border-radius: .2rem;
	}
	
	& > span
	{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		overflow-x: scroll;
		scrollbar-color: var(--color-dark) var(--color-muted);


		& > time
		{
			margin-inline-end: var(--spacing-dxs);
			padding: var(--spacing-dxs) var(--spacing-dsm);
			border: .1rem solid var(--color-muted);
			border-radius: .2rem;

			&:last-child { margin-inline-end: 0 }

			&.active
			{
				border-color: var(--color-accent);
				background-color: var(--color-muted);
				color: var(--color-light);
				font-weight: bold;
			}
		}
	}
}



/*= Forms =*/

form
{
	padding: var(--spacing-dsm) var(--spacing-dmd);

	small > :is(em, strong) { color: var(--color-accent); }
}



/*= Meter Card =*/

.meter-card
{
	flex-grow: 0;

	meter { width: 100%; }
}



/*= Set =*/

.set {
	--current-radius: var(--border-radius-sm);

	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	padding: 0;

	&._col { flex-direction: column; }
	
	& > *
	{
		margin: 0;
		border-radius: 0;
		flex-shrink: 1;
		overflow: hidden;
	}

	&:not(._col) > *
	{
		&:first-child
		{
			border-start-start-radius: var(--current-radius);
			border-end-start-radius: var(--current-radius);
		}

		&:last-child
		{
			border-start-end-radius: var(--current-radius);
			border-end-end-radius: var(--current-radius);
		}

		&:not(:first-child)
		{
			border-inline-start: none;
		}

		&:not(:last-child)
		{
			border-inline-end: none;
		}
	}

	&._col > *
	{
		margin: 0;
		border-radius: 0;

		&:first-child
		{
			border-start-start-radius: var(--current-radius);
			border-start-end-radius: var(--current-radius);
		}

		&:last-child
		{
			border-end-start-radius: var(--current-radius);
			border-end-end-radius: var(--current-radius);
		}

		&:not(:first-child)
		{
			border-block-start: none;
		}

		&:not(:last-child)
		{
			border-block-end: none;
		}
	}
}



/*= Scrollist =*/

.scrollist
{
	width: 100%;
	flex: 2 1 auto;
	overflow-y: scroll;
	padding: var(--spacing-dsm) var(--spacing-dmd);
	margin-block: var(--spacing-dsm);

	& > * { margin-inline: 0; }
	& > :first-child { margin-block-start: 0; }
	& > :not(:last-child) { margin-block-end: var(--spacing-dsm); }
}



/*= Alert =*/

.alert
{
	display: grid;
	grid-gap: var(--spacing-dxs);
	align-items: center;
	padding: var(--spacing-dsm);
	margin-block-end: var(--spacing-dsm);
	min-width: 100%;
	font-size: var(--font-size-dsm);
	text-align: start;
	color: var(--color-info);
	background-color: color-mix(in srgb, var(--color-info) 10%, white);
	border: var(--border-2xs) solid var(--color-info);
	border-radius: var(--border-radius-md);
	box-shadow: var(--box-shadow-subtler);
}



/*= Icon Input =*/
/*= Product count card =*/
/*= Product options card =*/
/*= Menu Icon button =*/
/*= Form Label =*/
/*= Profile line =*/
/*= Notif =*/
/*= Textfield =*/
/*= invoice line =*/
/*= Numfield =*/
/*= Button list =*/
/*= Footprint =*/
/*= Corner menu =*/
/*= Main title =*/
/*= Check line =*/
/*= Scalar bar =*/
/*= Button =*/
/*= Popup =*/
/*= Progress stepcounter =*/