/**
 * Tutorial Pagination Block
 *
 * Frontend + Editor styles.
 *
 * @package RudraCustomBlocks
 */

/* ==========================================================================
   Root
   ========================================================================== */

   .rudra-tutorial-pagination-block {
	/* ----------------------------------------------------------------------
	   Colors
	   ---------------------------------------------------------------------- */
	--rudra-pagination-text: var(--wp--preset--color--contrast, currentColor);
	--rudra-pagination-background: var(--wp--preset--color--base, #ffffff);
	--rudra-pagination-border: var(--wp--preset--color--contrast-3, #dcdcdc);
	--rudra-pagination-hover-background: var(--wp--preset--color--accent-6, rgba(0,0,0,.04));
	--rudra-pagination-hover-text: var(--rudra-pagination-text);
	--rudra-pagination-label: currentColor;
	--rudra-pagination-chapter: currentColor;
	/* ----------------------------------------------------------------------
	   Border
	   ---------------------------------------------------------------------- */
	--rudra-pagination-radius: 8px;
	/* ----------------------------------------------------------------------
	   Layout
	   ---------------------------------------------------------------------- */
	--rudra-pagination-gap: var(--wp--preset--spacing--30);
	--rudra-pagination-button-gap: .4rem;
	--rudra-pagination-content-gap: .25rem;
	--rudra-pagination-button-padding: 1rem; /*var(--wp--preset--spacing--40);*/
	--rudra-pagination-button-height: auto;
	--rudra-pagination-button-width: auto;
	/* ----------------------------------------------------------------------
	   Animation
	   ---------------------------------------------------------------------- */
	--rudra-pagination-animation: 200ms;	
}

.rudra-tutorial-pagination {
	display:grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: var(--rudra-pagination-gap);
	margin-block: var(--wp--preset--spacing--50);
	color: var(--rudra-pagination-text);
}

.rudra-tutorial-pagination *,
.rudra-tutorial-pagination *::before,
.rudra-tutorial-pagination *::after{

	box-sizing:border-box;

}

/* ==========================================================================
   Button
   ========================================================================== */

.rudra-tutorial-pagination__button{
	display:flex;
	flex-direction:column;	
	justify-content:center;
	gap: var(--rudra-pagination-button-gap);
	width: var(--rudra-pagination-button-width);
	min-height: var(--rudra-pagination-button-height);
	padding: var(--rudra-pagination-button-padding);
	text-decoration:none;
	background: var(--rudra-pagination-background);
	color: var(--rudra-pagination-text);
	border:1px solid var(--rudra-pagination-border);
	border-radius: var(--rudra-pagination-radius);
	transition:
		background-color var(--rudra-pagination-animation) ease,
		border-color var(--rudra-pagination-animation) ease,
		color var(--rudra-pagination-animation) ease,
		transform var(--rudra-pagination-animation) ease;

}

/* ==========================================================================
   Hover
   ========================================================================== */

.rudra-tutorial-pagination__button:hover{

	background:
		var(--rudra-pagination-hover-background);

	color:
		var(--rudra-pagination-hover-text);

	text-decoration:none;

	transform:translateY(-2px);

}

/* ==========================================================================
   Focus
   ========================================================================== */

.rudra-tutorial-pagination__button:focus-visible{

	outline:2px solid currentColor;

	outline-offset:3px;

}

/* ==========================================================================
   Previous
   ========================================================================== */

.rudra-tutorial-pagination__button[data-direction="previous"]{

	align-items:flex-start;

	text-align:left;

}

/* ==========================================================================
   Next
   ========================================================================== */

.rudra-tutorial-pagination__button[data-direction="next"]{

	align-items:flex-end;

	text-align:right;

}

/* ==========================================================================
   Label
   ========================================================================== */

.rudra-tutorial-pagination__label{

	font-size:
		var(--wp--preset--font-size--small);

	line-height:1.2;

	color:
		var(--rudra-pagination-label);

	opacity:.75;

}

/* ==========================================================================
   Content
   ========================================================================== */

.rudra-tutorial-pagination__content{

	display:flex;

	flex-direction:column;

	gap:
		var(--rudra-pagination-content-gap);

}

/* ==========================================================================
   Chapter
   ========================================================================== */

.rudra-tutorial-pagination__chapter{

	font-size:
		var(--wp--preset--font-size--small);

	font-weight:600;

	color:
		var(--rudra-pagination-chapter);

	opacity:.75;

}

/* ==========================================================================
   Title
   ========================================================================== */

.rudra-tutorial-pagination__title{

	font-size:
		var(--wp--preset--font-size--medium);

	font-weight:600;

	line-height:1.4;

	word-break:break-word;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:781px){

	.rudra-tutorial-pagination{

		grid-template-columns:1fr;

	}

	.rudra-tutorial-pagination__button[data-direction="next"]{

		align-items:flex-start;

		text-align:left;

	}

}