/* ==========================================================
   Hyperion – Κοινά εικονίδια
   Τα βέλη είναι πραγματικά SVG (μέσω mask), όχι clip-path
   πολύγωνα: βγαίνουν καθαρά σε κάθε μέγεθος και κληρονομούν
   το χρώμα του κειμένου.
   ========================================================== */

:root {
	--hr-ico-arrow-right: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	--hr-ico-arrow-down: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v14M6 11l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	--hr-ico-arrow-up: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V6M6 13l6-6 6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

/* Βάση: ένα τετράγωνο βαμμένο στο currentColor, κομμένο σε σχήμα βέλους. */
.hr-ico {
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.hr-ico--right { -webkit-mask-image: var( --hr-ico-arrow-right ); mask-image: var( --hr-ico-arrow-right ); }
.hr-ico--down  { -webkit-mask-image: var( --hr-ico-arrow-down );  mask-image: var( --hr-ico-arrow-down ); }
.hr-ico--up    { -webkit-mask-image: var( --hr-ico-arrow-up );    mask-image: var( --hr-ico-arrow-up ); }

/* Διαχωριστικό αντί για άνω τελεία: λεπτή κάθετη γραμμή. */
.hr-sep {
	display: inline-block;
	width: 1px;
	height: 0.85em;
	margin: 0 0.7em;
	vertical-align: -0.1em;
	background: currentColor;
	opacity: 0.35;
}