/**
 * =============================================================
 * @subpackage	RAXO Pagination Module Layout
 * -------------------------------------------------------------
 * @copyright	Copyright (C) 2009-2026 RAXO Group
 * @link		https://www.raxo.org
 * @license		RAXO Commercial License
 * 				This file is forbidden for redistribution
 * =============================================================
 */


/* ----- RESET & DEFAULT Styles ----- */
.raxo-pagination {
	container: raxo-pagination / inline-size;
	margin-block: 2rem;
	box-sizing: border-box;
	overflow: hidden;

	&:first-child { margin-block-start: 0; }
	& *, & ::before, & ::after { box-sizing: inherit; }

	& article, & h3, & h4,
	& img, & a {
		margin: 0; padding: 0;
		background: transparent none;
		border: 0 none;
	}
	& a {
		outline: 0;
		text-decoration: none;
		transition: all .25s ease-out;
		
		&:hover { text-decoration: underline; }
	}
}



/* ----- Module BLOCK ----- */
.raxo-pagination {
	/* --- Layout SETTINGS --- */
	--font-size: 14px;
	--image-border: 1px;	/* set 0px to disable */
	--image-spacing: 2px;	/* use the range 0px - 24px */

	/* --- Block NAME --- */
	& .raxo-block-name {
		margin-bottom: 16px;
		padding: 4px 10px 6px;
		font-size: 18px;
		font-weight: bold;
		line-height: 22px;
		color: var(--raxo-text-deep);
		background-color: var(--raxo-gray-100);
		border-radius: 2px;
	}

	/* --- Block INTRO --- */
	& .raxo-block-intro {
		margin-bottom: 20px;
		padding: 0 10px;
		font-size: calc(var(--font-size) + 2px);
		line-height: 1.375;
		color: var(--raxo-text-base);
	}

	/* --- Block BUTTON --- */
	& .raxo-block-button {
		margin-top: 8px;
		padding: 0 10px;
		font-size: var(--font-size);
		line-height: 1.43;
		text-align: right;
		color: var(--raxo-text-muted);
	}


/* ----- MODULE Items ----- */
	& .raxo-body {
		position: relative;
		overflow: hidden;
	}
	& .raxo-block-name + .raxo-body {
		margin-top: 20px;
	}

	& .raxo-normal {
		transition: opacity .4s ease-in-out;

		&.raxo-is-switching {
			opacity: 0;
		}
	}
	
	& article {
		padding: 20px 0;
		overflow: hidden;
		background: linear-gradient(90deg, var(--raxo-gray-200) 60%, transparent 60%) repeat-x;
		background-size: 10px 1px;
		
		&.raxo-item-upper {
			padding-top: 0;
			background: none;
		}
		&.raxo-item-hide {
			display: none;
		}
		& .raxo-wrap {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 20px 24px;
		}
	}


	/* --- Item IMAGE --- */
	& .raxo-image {
		flex: 0 1 auto;
		align-self: flex-start;
		padding: var(--image-spacing);
		background-color: var(--raxo-gray-100);
		border: var(--image-border) solid var(--raxo-gray-400);
		border-radius: 2px;
		transition: border-color .25s ease;

		article:hover & { 
			border-color: var(--raxo-theme-color); 
		}
		& img {
			max-width: 100%;
			height: auto;
		}
	}


	/* --- Item CONTENT --- */
	& .raxo-content { 
		flex: 1 1 10rem;
		font-size: var(--font-size);
	}
	& .raxo-title {
		font-size: clamp(16px, 1.6cqi, 20px);
		line-height: 1.25em;
		color: var(--raxo-text-deep);
		
		& a {
			font-weight: bold;
			color: inherit;
		}
	}
	& .raxo-text {
		padding-top: 8px;
		line-height: 1.3;
		color: var(--raxo-text-base);
	}
	& .raxo-readmore {
		padding-left: 5px;
	}


	/* --- Item FIELDS --- */
	& .raxo-info,
	& .raxo-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 16px;
		color: var(--raxo-text-muted);
		font-family: Verdana, Geneva, 'Segoe UI', sans-serif;
		font-size: calc(var(--font-size) - 2px);
		line-height: 1.2;
	}

	/* --- INFO Fields --- */
	& .raxo-info {
		margin-bottom: 4px;
		text-transform: uppercase;
	}
	& .raxo-category {
		font-weight: bold;
	}

	/* --- META Fields --- */
	& .raxo-meta {
		margin-top: 10px;

		& > span {
			padding-left: 18px;
			background-repeat: no-repeat;
			background-position: 0 0;
			background-size: auto 14px;
		}
		& .raxo-author { background-image: url(ico-author.svg); }
		& .raxo-comments { background-image: url(ico-comments.svg); }
		& .raxo-hits { background-image: url(ico-hits.svg); }
		& .raxo-rating { background-image: url(ico-rating.svg); }
	}



	/* --- Page NAVIGATION --- */
	& .raxo-navigation {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px;
		margin-top: 2px;
		padding: 4px 8px;
		color: var(--raxo-text-muted);
		font-family: Verdana, Geneva, 'Segoe UI', sans-serif;
		font-size: calc(var(--font-size) - 1px);
		line-height: 1.85;
		background-color: var(--raxo-gray-100);
		border-radius: 2px;
		overflow: hidden;

		& a,
		& span {
			display: inline-block;
			padding: 0 6px;
			min-width: 24px;
			text-align: center;
			border-radius: 2px;
		}
		& a {
			&:focus { outline: none; }
			&:hover {
				text-decoration: none;
				background-color: var(--raxo-gray-200);
			}
		}
		& .raxo-nav-active {
			color: var(--raxo-text-deep);
			background-color: var(--raxo-gray-200);
		}
		& :is(.raxo-nav-first, .raxo-nav-last, .raxo-nav-prev, .raxo-nav-next) {
			color: var(--raxo-text-muted);
			text-transform: uppercase;
		}
		& [aria-disabled="true"] {
			color: var(--raxo-text-light);
			cursor: default;
		}
	}
}


/* ----- RESPONSIVE breakpoints ----- */
@container raxo-pagination (width < 576px) {
	.raxo-pagination {
		& .raxo-block-name,
		& .raxo-block-intro,
		& .raxo-block-button,
		& .raxo-navigation {
			padding-inline: 4px;
		}
	}
}


/* ----- COLOR Schemes ----- */
.raxo-pagination {
	/* --- LIGHT Color Mode (default) --- */
	--raxo-color-base: oklch(0.48 0.19 267.8);
	--raxo-theme-color: var(--raxo-color-base);

	--raxo-gray-100: hsl(232, 1%, 98%);
	--raxo-gray-200: hsl(232, 2%, 88%);
	--raxo-gray-300: hsl(232, 3%, 69%);
	--raxo-gray-400: hsl(232, 4%, 45%);
	--raxo-gray-500: hsl(232, 5%, 30%);
	--raxo-gray-600: hsl(232, 5%, 22%);
	--raxo-gray-900: hsl(232, 7%,  6%);

	--raxo-text-deep:  var(--raxo-gray-900);
	--raxo-text-base:  var(--raxo-gray-500);
	--raxo-text-muted: var(--raxo-gray-400);
	--raxo-text-light: var(--raxo-gray-300);

	/* --- DARK Color Mode --- */
	&.dark-mode, &.mode-dark {
		--raxo-theme-color: oklch(
			from var(--raxo-color-base) calc(l * 1.1) calc(c * 0.8) h
		);

		--raxo-gray-100: hsl(232, 8%,  5%);
		--raxo-gray-200: hsl(232, 6%, 16%);
		--raxo-gray-300: hsl(232, 5%, 29%);
		--raxo-gray-400: hsl(232, 3%, 51%);
		--raxo-gray-500: hsl(232, 2%, 66%);
		--raxo-gray-600: hsl(232, 2%, 73%);
		--raxo-gray-900: hsl(232, 1%, 87%);
	}

	/* --- COLOR Palette --- */
	&.color-red		{ --raxo-color-base: oklch(0.53 0.19 28.82); }
	&.color-pink	{ --raxo-color-base: oklch(0.58 0.19 354.7); }
	&.color-orange	{ --raxo-color-base: oklch(0.61 0.18 45.23); }
	&.color-yellow	{ --raxo-color-base: oklch(0.82 0.17 94.64); }
	&.color-brown	{ --raxo-color-base: oklch(0.44 0.05 39.62); }
	&.color-green	{ --raxo-color-base: oklch(0.54 0.17 140.3); }
	&.color-teal	{ --raxo-color-base: oklch(0.58 0.11 186.8); }
	&.color-blue	{ --raxo-color-base: oklch(0.48 0.18 259.4); }
	&.color-sky		{ --raxo-color-base: oklch(0.62 0.15 243.2); }
	&.color-violet	{ --raxo-color-base: oklch(0.48 0.19 287.4); }
	&.color-purple	{ --raxo-color-base: oklch(0.48 0.19 303.4); }
	&.color-gray	{ --raxo-color-base: oklch(0.38 0.0186 254); }

	/* --- COLOR Tuning --- */
	& a, & a:hover,
	& .raxo-category,
	& article:hover .raxo-title a {
		color: var(--raxo-theme-color);
	}
}