/*
 * Pop Heroicons — base stylesheet
 *
 * How it works
 * ─────────────
 * .has-heroicon::before renders a coloured square whose shape is cut out
 * by the SVG via CSS mask-image. Because the shape comes from the mask
 * and the colour comes from background-color:currentColor, icons
 * automatically match the element's text colour and respect colour
 * transitions / states without any extra CSS.
 *
 * Customisation
 * ─────────────
 * Override the custom properties below in your theme's stylesheet:
 *
 *   :root {
 *     --heroicon-size: 1.25em;   ← make all icons bigger
 *     --heroicon-gap:  0.5em;    ← add more space between icon and text
 *   }
 *
 *   .my-element {
 *     --heroicon-size: 1.5em;    ← scope to a single element
 *   }
 */


/* ─── Custom properties (global defaults) ───────────────────────────────────── */

:root {
	--heroicon-size: 1em;       /* scales with the element's font-size   */
	--heroicon-gap:  0.375em;   /* space between icon and text            */
}


/* ─── Base ::before setup ────────────────────────────────────────────────────

   Applied to every element that carries .has-heroicon.
   Individual .icon-* classes (generated by PHP) set mask-image.          */

.has-heroicon::before {
	content:    '';
	display:    inline-block;
	width:      var(--heroicon-size, 1em);
	height:     var(--heroicon-size, 1em);

	/* Icon colour = text colour of the parent element */
	background-color: currentColor;

	/* Mask: the SVG path punches the shape out of the coloured square */
	-webkit-mask-size:     contain;
	        mask-size:     contain;
	-webkit-mask-repeat:   no-repeat;
	        mask-repeat:   no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;

	/* Vertical alignment — centres the icon on the text mid-line.
	   Adjust this value if your typeface sits differently. */
	vertical-align: middle;

	/* Gap between icon and label */
	margin-right: var(--heroicon-gap, 0.375em);

	/* Prevent the icon from squishing inside flex or grid containers */
	flex-shrink: 0;
}


/* ─── Icon-only variant ──────────────────────────────────────────────────────

   Use .icon-only when the element contains no visible text (e.g. a button
   with only an icon and an aria-label).  Removes the right margin so the
   icon doesn't create unexpected spacing.

   Example:
     <button class="has-heroicon icon-x-mark icon-only" aria-label="Close"></button> */

.has-heroicon.icon-only::before {
	margin-right: 0;
}


/* ─── Larger icon variant ───────────────────────────────────────────────────

   A quick size bump — no magic numbers needed.

   Example:
     <span class="has-heroicon icon-star icon-lg">Favourite</span> */

.has-heroicon.icon-lg {
	--heroicon-size: 1.25em;
}

.has-heroicon.icon-xl {
	--heroicon-size: 1.5em;
}


/* ─── Chip / pill / badge helper ─────────────────────────────────────────────

   When .has-heroicon is on a chip-style element (inline-flex row),
   add .icon-chip to switch from inline-block to inline-flex so the
   icon and text centre-align correctly without the vertical-align hack.

   Example:
     <a class="chip has-heroicon icon-chip icon-arrow-up-right">Read more</a>

   Your chip styles can stay in your theme — this just handles alignment. */

.has-heroicon.icon-chip {
	display:     inline-flex;
	align-items: center;
	gap:         var(--heroicon-gap, 0.375em);
}

/* In flex mode the ::before margin is redundant — gap handles spacing. */
.has-heroicon.icon-chip::before {
	margin-right: 0;
}


/* ─── UI reference style ─────────────────────────────────────────────────────

   Makes an inline element look like the white shadow-card button style used
   in the main platform, so readers can recognise it in help content.

   Example:
     Click the <span class="has-heroicon icon-light-bulb ui-button">ElementProps</span> button.

   Works standalone too (no icon required):
     Click the <span class="ui-button">Save</span> button.        */

.ui-button {
	display:          inline-flex;
	align-items:      center;
	gap:              var(--heroicon-gap, 0.375em);
	padding:          0.55em 0.55em;
	margin:				0em 0.5em 0em 0.5em;
	background:       #ffffff;
	border-radius:    5px;
	color:            #0f172a;
	font-size:        0.875em;
	font-weight:      500;
	line-height:      1.4;
	white-space:      nowrap;
	box-shadow:       0 4px 4px rgba(0, 0, 0, .10),
	                  0 10px 10px rgba(0, 0, 0, .04);
	/* Reset any link underline if used on an <a> */
	text-decoration:  none;
}

/* Icon inside a .ui-button — ::before margin replaced by gap */
.ui-button.has-heroicon::before {
	margin-right: 0;
	vertical-align: 0; /* flex handles alignment */
}


/* ─── Note on adding icons ───────────────────────────────────────────────────
 *
 * The individual .icon-*::before { mask-image: … } rules are generated
 * automatically by pop-heroicons.php from every .svg file in /icons/.
 * To add a new icon:
 *
 *   1. Drop your SVG into wp-content/plugins/pop-heroicons/icons/
 *   2. The class is .icon-<filename-without-extension>
 *      e.g.  my-custom-icon.svg  →  class="has-heroicon icon-my-custom-icon"
 *
 * No code edits needed.
 * ─────────────────────────────────────────────────────────────────────────── */