/**
 * Blocks CSS for Query Features
 * 
 * Contains general block styles. Is enqueued in the front- & backend.
 * This file does not get processed and is loaded *after* editor styles so it
 * will take precedence over editor-specific styles using the same selectors.
 * 
 * @since 2.0
 */


/*    Post template
__________________________________
*/
ul.wp-block-post-template {
	list-style: none;
	width: 100%;
}
ul.wp-block-post-template li {
	margin: 0px !important;
}
.wp-block-query {
	width: 100%;
	position: relative;
}
.wp-block-query .wp-block-post-template {
	flex: 2 2 50px;
}


/*    Layout
__________________________________
*/
.greyd-posts-slider.greyd-posts-slider {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.greyd-posts-slider .query-pages-wrapper {
	position: relative;
	display: flex;
	/* width: 100%; */
	margin: 0;
	overflow: hidden;
	flex: 2 2 50px;
}

.greyd-posts-slider .query-pages-wrapper:has( > div:first-child:last-child ) {
	overflow: visible;
}

.greyd-posts-slider .query-page {
	width: 100%;
	min-width: 100%;
	display: grid;
	/* grid-auto-flow: column; */
	gap: var(--wp--style--block-gap);
	height: max-content;
}

/**
 * Fix Layout: Grid
 * @since 1.9.14
 */
.wp-block-query .wp-block-post-template .wp-block-post-template-is-layout-grid {
	display: block;
}

/**
 * Fix Layout: Flow for first level elements (e.g. <p> without wrapper)
 * @since 2.2.0
 */
 .wp-block-query-is-layout-flow .query-post > :last-child:last-child {
	margin-block-end: 0;
}
.wp-block-query-is-layout-flow .query-post > :first-child:first-child {
	margin-block-start: 0;
}


/*    Pagination
__________________________________
*/
.greyd-posts-slider .pagination {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* overlap style */
.greyd-posts-slider .pagination.overlap {
	position: absolute;
	width: 100%;
	margin: 0px;
	z-index: 1;
}
.greyd-posts-slider .pagination.overlap.top,
.greyd-posts-slider .pagination.overlap.top_side {
	top: 0px;
}
.greyd-posts-slider .pagination.overlap.bottom,
.greyd-posts-slider .pagination.overlap.bottom_side {
	bottom: 0px;
}
.greyd-posts-slider .pagination.left {
	justify-content: flex-start;
}
.greyd-posts-slider .pagination.right {
	justify-content: flex-end;
}
.greyd-posts-slider .pagination.space {
	justify-content: space-between;
}

.greyd-posts-slider .pagination a,
.greyd-posts-slider .pagination .link,
.greyd-posts-slider .pgn_arrows a,
.greyd-posts-slider .pgn_arrows .link {
	text-decoration: none;
}

.greyd-posts-slider .pgn img {
	max-width: none;
	width: 1em;
}

/* sorting */
.greyd-posts-slider .pgn.sorting {
	width: 100%;
	display: flex;
	align-self: start;
}
.greyd-posts-slider .no_result {
	width: 100%;
}

/* arrows */
.greyd-posts-slider .pgn.arrows {
	position: relative;
	display: flex;
	flex: 0 0 0;
	align-items: center;
}
.greyd-posts-slider .pgn.arrows a {
	padding: 0.5rem;
	font-size: 1.4em;
	text-decoration: none;
}
.greyd-posts-slider .pgn.arrows.overlap {
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 0;
}
.greyd-posts-slider .pgn.arrows.overlap.left {
	left: 0;
}
.greyd-posts-slider .pgn.arrows.overlap.right {
	right: 0;
}
.greyd-posts-slider .pgn_arrows.aligntop {
	align-items: flex-start;
}
.greyd-posts-slider .pgn_arrows.alignbottom {
	align-items: flex-end;
}
.greyd-posts-slider .pgn_arrows.top {
	top: 0;
}
.greyd-posts-slider .pgn_arrows.bottom {
	bottom: 0;
}
@media (max-width: 992px) {
	.greyd-posts-slider .pgn_arrows.alignmobiletop {
		align-items: flex-start;
	}
	.greyd-posts-slider .pgn_arrows.alignmobilemiddle {
		align-items: center;
	}
	.greyd-posts-slider .pgn_arrows.alignmobilebottom {
		align-items: flex-end;
	}
}

/* numbers */
:is(.pagination, .pgn_arrows) :is(.pgn_number, .pgn_previous, .pgn_next)  {
	display: inline-block;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	cursor: pointer;
	pointer-events: all;
}
.greyd-posts-slider .pgn.numbers {
	width: 100%;
	padding: 1rem;
}
.greyd-posts-slider .pgn.numbers,
.greyd-posts-slider .pgn.numbers .pgn_numbers {
	display: flex;
	justify-content: center;
	gap: var(--pgn-numbers-gutter, var(--wp--preset--spacing--tiny, 8px));
}
.greyd-posts-slider .pgn.numbers .pgn_numbers {
	flex-wrap: wrap;
}
/* for block editor preview */
.greyd-posts-slider .pgn.numbers > span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pgn-numbers-gutter, var(--wp--preset--spacing--tiny, 8px));
}
.greyd-posts-slider .pgn.numbers a {
	line-height: 1;
	margin: 0;
	text-decoration: none;
	word-break: normal;
}
.greyd-posts-slider .pgn.numbers.overlap {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 10;
}
.greyd-posts-slider .pgn.numbers.overlap.top {
	top: 0;
}
.greyd-posts-slider .pgn.numbers.overlap.bottom {
	bottom: var(--wp--style--block-gap);
}

/* current item */
.greyd-posts-slider .pgn_current {
	cursor: default;
}

/** loop slider */
.greyd-posts-slider.loop :is(.pgn_previous, .pgn_next).pgn_current {
	cursor: pointer;
}

/** non looped slider */
.greyd-posts-slider:not(.loop) :is(.pgn_previous, .pgn_next).pgn_current {
	opacity: 0.2;
	pointer-events: none;
}

/**
 * Cover flow animation
 * @since 1.2.4
 */
.greyd-posts-slider[data-animation=cover] {
	--transition: transform 300ms;
	/* outline: 2px solid red;
	overflow: visible; */
}
.greyd-posts-slider[data-animation=cover] .query-page:first-child {
	position: relative;
}
.greyd-posts-slider[data-animation=cover] .query-page {
	-webkit-transition: var(--transition);
	   -moz-transition: var(--transition);
		-ms-transition: var(--transition);
		 -o-transition: var(--transition);
			transition: var(--transition);

	position: absolute;
	left: 0;
	top: 50%;
	z-index: 9;
	padding: 0 14%;
	/* before */
	transform: translate(-89%, -50%) scale(0.6)
}
.greyd-posts-slider[data-animation=cover] .query-page.is-prev {
	/* prev */
	transform: translate(-38%, -50%) scale(0.6)
}
.greyd-posts-slider[data-animation=cover] .query-page.is-current {
	/* current */
	transform: translate(0%, -50%) scale(0.9)
}
.greyd-posts-slider[data-animation=cover] .query-page.is-current + .query-page {
	/* next */
	transform: translate(38%, -50%) scale(0.6)
}
.greyd-posts-slider[data-animation=cover] .query-page.is-current + .query-page ~ .query-page {
	/* after */
	transform: translate(80%, -50%) scale(0.6)
}
.greyd-posts-slider[data-animation=cover] .query-page:not(.is-current) {
	pointer-events: none;
}
.greyd-posts-slider[data-animation=cover] .query-page .query-post:first-child:last-child {
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
			transform-style: preserve-3d;
   
	-webkit-transition: var(--transition);
	   -moz-transition: var(--transition);
		-ms-transition: var(--transition);
		 -o-transition: var(--transition);
			transition: var(--transition);

	transform: perspective(1000px) rotateY(70deg)
}
.greyd-posts-slider[data-animation=cover] .query-page.is-current .query-post:first-child:last-child {
	transform: perspective(1000px)
}
.greyd-posts-slider[data-animation=cover] .query-page.is-current ~ .query-page .query-post:first-child:last-child {
	transform: perspective(1000px) rotateY(-70deg)
}

/*    post-table
__________________________________
*/
.posts_table table {
	text-align: left;
	width: auto;
	min-width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
.posts_table:not(.wp-block-table) table thead + * > tr:first-child > td,
.posts_table:not(.wp-block-table) table tbody > tr:first-child > td,
.posts_table:not(.wp-block-table) table thead + * > tr:first-child > th,
.posts_table:not(.wp-block-table) table thead > tr:first-child > th {
	border-top: none !important;
}

/* sortable */
table .sortable {
	cursor: pointer;
	position: relative;
	padding-right: calc( var(--wp--preset--spacing--tiny) + 1em );
}
table .sortable span.icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: var(--wp--preset--spacing--tiny);
	top: 0;
	bottom: 0;
}
table .sortable span.icon > span,
table .sortable span.icon > span {
	display: block;
	border: 5px solid transparent;
	margin: 1px 0;
}
table .sortable span.icon > span:first-child {
	border-bottom-color: initial;
}
table .sortable span.icon > span:last-child {
	border-top-color: initial;
}
table .sortable.ascending span.icon > span:first-child {
	border-width: 0px;
	margin-bottom: 4px;
}
table .sortable.descending span.icon > span:last-child {
	border-width: 0px;
	margin-top: 4px;
}



/*    Loading Spinner
__________________________________
*/
.loading_spinner_wrapper {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 0;
}

.greyd-posts-slider .loading_spinner_wrapper {
	padding: 80px 0;
}

.loading_spinner {
	display: inline-block;
	position: relative;
	width: 46px;
	height: 46px;
}

.loading_spinner div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	margin: 8px;
	border: 4px solid var(--loading-spinner-color, currentColor);
	border-radius: 50%;
	animation: loading_spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: var(--loading-spinner-color, currentColor) transparent transparent transparent;
}

.loading_spinner div:nth-child(1) {
	animation-delay: -0.45s;
}

.loading_spinner div:nth-child(2) {
	animation-delay: -0.3s;
}

.loading_spinner div:nth-child(3) {
	animation-delay: -0.15s;
}

@keyframes loading_spinner {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
