/**
 * --------------------------------------------------------
 * WP Custom Gallery
 * Toolbar
 * --------------------------------------------------------
 */

/*----------------------------------------------------------
Toolbar Container
----------------------------------------------------------*/

.wpcg-toolbar {

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;

}

/*----------------------------------------------------------
Toolbar Button
----------------------------------------------------------*/

.wpcg-toolbar-btn {

	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: var(--wpcg-toolbar-size);
	height: var(--wpcg-toolbar-size);

	padding: 0;

	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;

	background: rgba(0,0,0,.35);

	color: #ffffff;

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	cursor: pointer;

	transition:
		background .25s ease,
		border-color .25s ease,
		transform .25s ease,
		box-shadow .25s ease;

}

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

.wpcg-toolbar-btn svg {

	width: 20px;
	height: 20px;

	stroke: currentColor;
	fill: none;

	pointer-events: none;

}

/*----------------------------------------------------------
Hover
----------------------------------------------------------*/

.wpcg-toolbar-btn:hover {

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

	border-color: rgba(255,255,255,.45);

	transform: translateY(-2px);

	box-shadow: 0 6px 14px rgba(0,0,0,.35);

}

/*----------------------------------------------------------
Active
----------------------------------------------------------*/

.wpcg-toolbar-btn:active {

	transform: scale(.96);

}

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

.wpcg-toolbar-btn:focus-visible {

	outline: 2px solid #ffffff;

	outline-offset: 3px;

}

/*----------------------------------------------------------
Disabled
----------------------------------------------------------*/

.wpcg-toolbar-btn:disabled {

	opacity: .35;

	cursor: default;

	pointer-events: none;

}

/*----------------------------------------------------------
Button States
----------------------------------------------------------*/

.wpcg-toolbar-prev,
.wpcg-toolbar-next {

	display: none;

}

/*
 * JavaScript will add this class
 * when navigation is available.
 */
.wpcg-gallery.has-navigation
.wpcg-toolbar-prev,

.wpcg-gallery.has-navigation
.wpcg-toolbar-next {

	display: inline-flex;

}

/*----------------------------------------------------------
Zoom Active
----------------------------------------------------------*/

.wpcg-toolbar-btn.is-active {

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

	border-color: rgba(255,255,255,.65);

}

/*----------------------------------------------------------
Fullscreen Button
----------------------------------------------------------*/

.wpcg-toolbar-fullscreen {

	margin-left: 4px;

}

/*----------------------------------------------------------
Tooltip (Future Support)
----------------------------------------------------------*/

.wpcg-toolbar-btn::after {

	content: attr(title);

	position: absolute;

	left: 50%;
	bottom: calc(100% + 8px);

	transform: translateX(-50%) translateY(6px);

	padding: 5px 8px;

	border-radius: 4px;

	background: rgba(0,0,0,.9);

	color: #ffffff;

	font-size: 11px;
	line-height: 1;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .2s ease,
		transform .2s ease;

}

/*----------------------------------------------------------
Tooltip Hover
----------------------------------------------------------*/

.wpcg-toolbar-btn:hover::after {

	opacity: 1;

	visibility: visible;

	transform: translateX(-50%) translateY(0);

}

/*----------------------------------------------------------
Toolbar Animation
----------------------------------------------------------*/

.wpcg-toolbar {

	opacity: 0;

	transform: translateY(8px);

	transition:
		opacity .25s ease,
		transform .25s ease;

}

.wpcg-gallery:hover .wpcg-toolbar {

	opacity: 1;

	transform: translateY(0);

}

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

@media (max-width:768px){

	.wpcg-toolbar{

		gap:6px;

	}

	.wpcg-toolbar-btn{

		width:38px;
		height:38px;

	}

	.wpcg-toolbar-btn svg{

		width:18px;
		height:18px;

	}

	/* Tooltips are hidden on touch devices */

	.wpcg-toolbar-btn::after{

		display:none;

	}

}

/*--------------------------------------------------------------
# Desktop Toolbar
--------------------------------------------------------------*/

/* @media (min-width: 769px) { */

	.wpcg-toolbar {

		position: absolute;

		right: 16px;

		bottom: 16px;

		z-index: 30;

		opacity: 1;

		visibility: visible;

		pointer-events: auto;

	}

/* } */