@charset "UTF-8";

/*/ Image /*/

	.sizer-image{ 
		width: var(--content-width); max-width: 100%;
		height: auto; 
		opacity: 0;
	}
	

/*/ END Image /*/

/*/ Controls /*/
	
	/*/ Grid /*/
	
		.carousel-grid{
			display: grid;
			grid-template-columns:
				calc( 36px + 6px )
				minmax(0, 100%)
				calc( 36px + 6px )
			;
			grid-template-rows:
				1fr
			;
		}
		
		/* Padding */
			.carousel-grid > :nth-child(1),
			.carousel-grid > :nth-child(2),
			.carousel-grid > :nth-child(3)
			{ 
				padding-top: 15px; 
				padding-bottom: calc(15px * 1.5); 
			}

		/* Center Cell */
			.carousel-grid > :nth-child(2){
				display: flex; flex-direction: column;
				align-items: center;
				padding-left: var(--nav-height);
				padding-right: var(--nav-height);
			}
		
		/* Right Cell */
			.carousel-grid > :nth-child(3){
				position: relative;
			}
		
	/*/ END Grid /*/
	
	/*/ Buttons /*/
		
		/* Container */
		
		/*/ Button /*/
		
			image-carousel-button{
				position: relative;
				display: block;
				background-image: url('/images/widgets/ALD/carousel/interface/image-button.png');
				min-width: 15px; width: 15px;
				min-height: 15px; height: 15px;;
			}
			
			/*/ States /*/
			
				image-carousel-button[data-buttonstate="out"]
				{ background-position: 0 0; }

				image-carousel-button[data-buttonstate="out"]:hover,
				image-carousel-button[data-buttonstate="selected"]
				{ background-position: 0 -200%; }
				
				image-carousel-button[data-buttonstate="out"]:active
				{ background-position: 0 -100%; }

				image-carousel-button[data-buttonstate="out"]:active
				{ top: 1px; left: 1px; }
				
			/*/ END States /*/
			
		/*/ END Button /*/
	
	/*/ END Buttons /*/
	
/*/ END Controls /*/

/*/ Meter /*/
	
	/* Meter Object */
		image-carousel-meter{
			position: relative; right: 0;
			display: block;
			background-image: url('/images/widgets/ALD/carousel/interface/image-meter.png');
			min-width: 36px; width: 36px;
			min-height: 36px; height: 36px;
			margin-top: -8px;
			margin-bottom: -8px;
		}
	
	/* Meter Positions */
		image-carousel-meter[data-meterposition="1"]
		{background-position: 0 -100%;}
		image-carousel-meter[data-meterposition="2"]
		{background-position: 0 -200%;}
		image-carousel-meter[data-meterposition="3"]
		{background-position: 0 -300%;}
		image-carousel-meter[data-meterposition="4"]
		{background-position: 0 -400%;}
		image-carousel-meter[data-meterposition="5"]
		{background-position: 0 -500%;}
		image-carousel-meter[data-meterposition="6"]
		{background-position: 0 -600%;}
		image-carousel-meter[data-meterposition="7"]
		{background-position: 0 -700%;}
		image-carousel-meter[data-meterposition="8"]
		{background-position: 0 -800%;}
		image-carousel-meter[data-meterposition="9"]
		{background-position: 0 -900%;}
		image-carousel-meter[data-meterposition="10"]
		{background-position: 0 -1000%;}
		
/*/ END Meter /*/

image-carousel-image-list,
image-carousel-image-list *
{ display: none; }

/* Image */
	image-carousel-image-box,
	image-carousel-image-box *,
	[data-isimagecarousel="true"] image-die-cut a,
	isimagecarousel image-die-cut a
	{
		position: absolute; top: 0; left: 0;
		min-width: 100%; width: 100%;
		min-height: 100%; height: 100%;
	}

image-carousel-buttons{
	display: flex; flex-direction: row;
	flex-wrap: wrap;
	gap: 3px;
}


image-carousel-image-box > :nth-child(n+2){
	pointer-events: none;
}

.test-unix,
.test-out {
	font-family: "Courier Prime", monospace;
	font-weight: 400;
	font-style: normal;
	color: #fff;
}


@media (min-width: 650px){
	
	.carousel-grid{
		display: grid;
		grid-template-columns:
			calc( 36px - 8px + 2px )
			minmax(0, 100%)
			calc( 36px - 8px + 2px )
		;
		grid-template-rows:
			1fr
		;
	}
	
}