/**
 * Flickity Custom Styles
 * Styles for official Flickity fullscreen plugin
 */

:root 																{ 
	--gallery-height: 60vh;
	--tool-height: 30px;
}


/*
——————————————————————————————————————————
GALLERY 
——————————————————————————————————————————
*/

.ds-gallery 														{ width: 100%; height: auto; margin: 0; padding: var(--gap); background-color: var(--K-accent); position: relative; }
.ds-gallery .carousel-cell 											{ width: 100%; height: auto; margin: 0 var(--gap) 0 0; padding: 0; position: relative; }
.carousel-figure													{ width: 100%; height: var(--gallery-height); margin: calc(var(--tool-height) + var(--gap)) 0 0 0; padding: var(--S12) 0 0 0; display: flex; align-items: center; justify-content: center; position: relative; }
.ds-gallery img 													{ width: 100%; height: 100%; display: block; object-fit: contain;  }

/* Fullscreen on html element */
html.is-flickity-fullscreen 										{ overflow: hidden; }
html.is-flickity-fullscreen body 									{ height: 100%; overflow: hidden; }
html.is-flickity-fullscreen .site-content 							{ z-index: 2000; }

/* Gallery in fullscreen */
.ds-gallery.is-fullscreen 											{ width: 100%; height: 100%; margin: 0; padding: var(--gap); position: fixed; top: 0; left: 0; background: var(--K-accent); z-index: 1;  }
.is-fullscreen .carousel-cell 										{ width: 100%; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.is-fullscreen .carousel-figure										{ width: 100%; height: calc(100% - (var(--tool-height) + var(--gap))); margin: calc(var(--tool-height) + var(--gap)) 0 0 0;  padding: var(--gap) 0 0 0; display: flex; align-items: center; justify-content: center; position: relative; }	
.is-fullscreen img 													{ width: 100%; height: 100%; display: block; object-fit: contain;  }

/* Gallery caption */
.carousel-caption 													{ width: 100%; width: 100%; position: absolute; top: 0; left: 0; color: var(--K-accent-ink); opacity: 0; transition: opacity var(--A02); }
.carousel-cell.is-selected .carousel-caption 						{ opacity: 1; }
.is-fullscreen .carousel-caption 									{ opacity: 1; }

/*
——————————————————————————————————————————
GALLERY TOOLBAR
——————————————————————————————————————————
*/

.ds-gallery__toolbar 												{ position: absolute;  width: calc(100% - (2 * var(--gap))); height: var(--tool-height); top: var(--gap); right: var(--gap); display: flex; align-items: center; gap: var(--S01); z-index: 2; background-color: var(--K-accent); color: var(--K-accent-ink); }
.ds-gallery__toolbar .ds-gallery__status 							{ font-variant-numeric: tabular-nums; font-size: var(--S03); font-weight: 400; }

.ds-gallery .flickity-viewport 										{ z-index: 1; }
.ds-gallery__toolbar 												{ z-index: 2; }

/*
——————————————————————————————————————————
FULLSCREEN BUTTON (Official plugin)
——————————————————————————————————————————
*/

.flickity-fullscreen-button .flickity-button-icon 					{ display: none;  }

.flickity-fullscreen-button 										{ width: 28px; height: 28px; border-radius: 0; background: transparent; color: var(--K-accent-ink); transition: all var(--A03); cursor: pointer;  position: relative !important; }
.flickity-fullscreen-button:hover 									{ background: transparent; opacity: 0.8; }

.flickity-fullscreen-button-view::before,
.flickity-fullscreen-button-view::after								{ content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; }
.flickity-fullscreen-button-view::before							{ width: 28px; height: 1px; transform: translate(-50%, -50%); }
.flickity-fullscreen-button-view::after								{ width: 1px; height: 28px; transform: translate(-50%, -50%); }

.flickity-fullscreen-button-exit::before,
.flickity-fullscreen-button-exit::after								{ content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; }
.flickity-fullscreen-button-exit::before							{ width: 28px; height: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.flickity-fullscreen-button-exit::after								{ width: 1px; height: 28px; transform: translate(-50%, -50%) rotate(45deg); }

.flickity-fullscreen-button-view 									{ display: block; margin-left: auto; } 
.flickity-fullscreen-button-exit 									{ display: none; margin-left: auto; } 

.is-fullscreen .flickity-fullscreen-button-view 					{ display: none; }
.is-fullscreen .flickity-fullscreen-button-exit 					{ display: block; }

/*
——————————————————————————————————————————
NAVIGATION ARROWS
——————————————————————————————————————————
*/

.flickity-prev-next-button .flickity-button-icon					{ display: none; }

.flickity-prev-next-button 											{ width: 40px; height: 28px; border-radius: 0; background: transparent; color: var(--K-accent-ink); transition: all var(--A03); position: relative !important; }
.flickity-prev-next-button:hover 									{ background: transparent; opacity: 0.8; }
.flickity-prev-next-button:disabled 								{ opacity: 0.3; }

.flickity-prev-next-button::before 									{ content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; width: 100%; background: currentColor; transform: translateY(-50%); }
.flickity-prev-next-button::after 									{ content: ""; position: absolute; top: 50%; width: 19px; height: 19px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.flickity-prev-next-button.next::after                  			{ right: 3px; transform: translateY(-50%) rotate(45deg); }
.flickity-prev-next-button.previous::after             				{ left: 3px; transform: translateY(-50%) rotate(-135deg); }

.flickity-prev-next-button.previous 								{ left: auto; top: auto; transform: none; }
.flickity-prev-next-button.next 									{ right: auto; top: auto; transform: none; }

/*
——————————————————————————————————————————
PAGE DOTS
——————————————————————————————————————————
*/

.flickity-page-dots 												{ bottom: 1rem; }
.flickity-page-dots .dot 											{ width: 10px; height: 10px; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(0, 0, 0, 0.5); transition: background var(--A01); }
.flickity-page-dots .dot.is-selected 								{ background: rgba(0, 0, 0, 0.8); }

/* Fullscreen mode dots */
.is-fullscreen .flickity-page-dots 									{ bottom: 2rem; }
.is-fullscreen .flickity-page-dots .dot 							{ background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); }
.is-fullscreen .flickity-page-dots .dot.is-selected 				{ background: rgba(255, 255, 255, 1); }



/*
——————————————————————————————————————————
RESPONSIVE
——————————————————————————————————————————
*/

@media screen and (min-width: 768px) {

:root { 
--gallery-height: 40vh;
}

.ds-gallery .carousel-cell 											{ width: max-content;  }
.carousel-figure													{ height: auto; margin: 0; }
.ds-gallery img 													{ width: auto; height: var(--gallery-height); display: block; object-fit: unset;  }

/* Gallery in fullscreen */
.is-fullscreen .carousel-cell 										{ width: 100%; height: 100%; }
.is-fullscreen .carousel-figure										{ width: 100%; height: 100%; margin: 0; }
.is-fullscreen img 													{ width: auto; height: auto; max-width: 80vw; max-height: 70vh; object-fit: unset;  }

/* Gallery caption */
.is-fullscreen .carousel-caption 									{ width: 40%; position: fixed; top: 0; left: 0; }

/*
——————————————————————————————————————————
GALLERY TOOLBAR
——————————————————————————————————————————
*/

.ds-gallery__toolbar 												{ position: absolute; width: auto !important; }


/*
——————————————————————————————————————————
FULLSCREEN BUTTON (Official plugin)
——————————————————————————————————————————
*/

.flickity-fullscreen-button-view 									{ margin-left: var(--S03); } 
.flickity-fullscreen-button-exit 									{ margin-left: var(--S03); } 

	
}