/**
 * --------------------------------------------------------
 * WP Custom Gallery
 * Base Styles
 * --------------------------------------------------------
 */

/*----------------------------------------------------------
Root Variables
----------------------------------------------------------*/

:root {

	--wpcg-width: 600px;
	--wpcg-height: 450px;

	--wpcg-radius: 6px;

	--wpcg-bg: #000;
	--wpcg-overlay: rgba(0,0,0,.55);

	--wpcg-white: #fff;
	--wpcg-border: rgba(255,255,255,.15);

	--wpcg-transition: .25s ease;
	--wpcg-shadow: 0 12px 30px rgba(0,0,0,.25);

	--wpcg-toolbar-size: 42px;
	--wpcg-nav-size: 48px;

	--wpcg-font: inherit;

}

/*----------------------------------------------------------
Gallery Container
----------------------------------------------------------*/

.wpcg-gallery{

	position:relative;

	width:100%;
	max-width:var(--wpcg-width);

	margin:0 auto;

	font-family:var(--wpcg-font);

	line-height:1.4;

	color:var(--wpcg-white);

}

/*----------------------------------------------------------
Universal Box Model
----------------------------------------------------------*/

.wpcg-gallery *,
.wpcg-gallery *::before,
.wpcg-gallery *::after{

	box-sizing:border-box;

}

/*----------------------------------------------------------
Buttons
----------------------------------------------------------*/

.wpcg-gallery button{

	margin:0;
	padding:0;

	border:0;
	outline:none;

	background:none;

	cursor:pointer;

	font:inherit;

	color:inherit;

}

/*----------------------------------------------------------
Images
----------------------------------------------------------*/

.wpcg-gallery img{

	display:block;

	max-width:100%;

	height:auto;

	border:0;

	user-select:none;

	-webkit-user-drag:none;

}

/*----------------------------------------------------------
SVG
----------------------------------------------------------*/

.wpcg-gallery svg{

	width:22px;

	height:22px;

	display:block;

	fill:none;

	stroke:currentColor;

	stroke-width:2;

	stroke-linecap:round;

	stroke-linejoin:round;

	pointer-events:none;

}

/*----------------------------------------------------------
Links
----------------------------------------------------------*/

.wpcg-gallery a{

	color:inherit;

	text-decoration:none;

}

/*----------------------------------------------------------
Hidden
----------------------------------------------------------*/

.wpcg-gallery [hidden]{

	display:none !important;

}

/*----------------------------------------------------------
Focus
----------------------------------------------------------*/

.wpcg-gallery button:focus-visible{

	outline:2px solid #ffffff;

	outline-offset:2px;

}

/*----------------------------------------------------------
Selection
----------------------------------------------------------*/

.wpcg-gallery ::selection{

	background:#ffffff;

	color:#000;

}

/*----------------------------------------------------------
Loading Cursor
----------------------------------------------------------*/

.wpcg-gallery.loading{

	cursor:progress;

}

/*----------------------------------------------------------
Prevent Dragging
----------------------------------------------------------*/

.wpcg-image,
.wpcg-modal-image{

	-webkit-user-select:none;

	user-select:none;

	-webkit-touch-callout:none;

}

/*----------------------------------------------------------
Utility Classes
----------------------------------------------------------*/

.wpcg-hidden{

	display:none !important;

}

.wpcg-flex{

	display:flex;

}

.wpcg-center{

	display:flex;

	align-items:center;

	justify-content:center;

}

.wpcg-transition{

	transition:all var(--wpcg-transition);

}

.wpcg-no-select{

	user-select:none;

}

.wpcg-overflow-hidden{

	overflow:hidden;

}

.wpcg-text-center{

	text-align:center;

}

/*----------------------------------------------------------
Scrollbar (Modal)
----------------------------------------------------------*/

.wpcg-modal *{

	scrollbar-width:thin;

}

.wpcg-modal *::-webkit-scrollbar{

	width:8px;

	height:8px;

}

.wpcg-modal *::-webkit-scrollbar-thumb{

	background:rgba(255,255,255,.25);

	border-radius:10px;

}

/*----------------------------------------------------------
Animation Helpers
----------------------------------------------------------*/

.wpcg-fade{

	opacity:0;

	transition:opacity .25s ease;

}

.wpcg-fade.active{

	opacity:1;

}

.wpcg-scale{

	transform:scale(.96);

	transition:transform .25s ease;

}

.wpcg-scale.active{

	transform:scale(1);

}

/*----------------------------------------------------------
Accessibility
----------------------------------------------------------*/

.wpcg-gallery button[disabled]{

	opacity:.35;

	cursor:not-allowed;

}

/*----------------------------------------------------------
Mobile Defaults
----------------------------------------------------------*/

@media (max-width:768px){

	:root{

		--wpcg-width:100%;
		--wpcg-height:auto;

		--wpcg-nav-size:42px;

		--wpcg-toolbar-size:38px;

	}

}