/// CAROUSEL

$carousel-width: percentage(1/2);
$carousel-ratio: 4/3;
$carousel-height: $carousel-width / $carousel-ratio;

.box-carousel		{	position: relative;
						width: $carousel-width;
						height: 2*$v-margin; 
						padding-bottom: $carousel-height;
						overflow: hidden; }

.slide-carousel:not(.slide-detail)
					{	top: 0;
						width: 100%; height: 0;
						padding-bottom: percentage(1/$carousel-ratio);
						background-size: cover;
						cursor: inherit; }

.slide-carousel:not(.slide-active,.slide-next, .slide-prev)
					{	pointer-events: none;
						opacity: 0; }

.box-carousel .slide{	@extend .slide-carousel; }


/// PAGER

.pager				{	z-index: 300; position: absolute;
						bottom: 0;
						box-sizing: border-box;
						margin: 0 auto; 
						width: 100%; 
						padding: 0;
						text-align: center; }

.box-zoomed .pager	{	bottom: 0.5*$v-margin; }

.pager li			{	display: inline-block; }

.pg-item				{	display: inline-block;
						box-sizing: border-box;
						height: 12px; line-height: 12px;
						width: 6px; height: 6px;
						margin: 5px $h-margin/6;
						padding: 0;
						background-color: $text;
						border: 1px solid $text;
						border-radius: 3px;
						font-size: 0; }
.pg-item:hover		{	border-color: $accent; }
.pg-item-active		{	border-color: black; }

.pg-item-active:link,
.pg-item-active:visited,
.pg-item-active:hover
					{	background-color: white; border-color: $text;
						cursor: default; pointer-events: none; }

/// BACKWARDS COMPATIBILITY
.slide-box-carousel	{	@extend .box-carousel; }

.pager .number		{	@extend .pg-item; }
.pager .active		{	@extend .pg-item-active; }