/**
 * File: assets/css/svg-icons.css
 * Purpose: Shared structural styling for inline SVG icons rendered by the
 *          12D plugin helper system.
 *
 * Scope:
 * - Applies only to inline SVGs rendered inside the shared icon wrapper.
 * - Also supports the 12D Card widget icon mode.
 * - Does not affect unrelated SVGs elsewhere unless they use these classes.
 *
 * Notes:
 * - SVG files should ideally use fill="currentColor" and/or
 *   stroke="currentColor" so icon color can be controlled through CSS.
 * - Icon size should be controlled by CSS, not by hardcoded width/height
 *   attributes inside the SVG file.
 */

/* ============================================================
   GENERIC INLINE SVG WRAPPER
   ============================================================ */

/**
 * Shared inline SVG wrapper.
 *
 * Why this exists:
 * - Gives consistent box sizing
 * - Aligns icons cleanly in flex/grid/UI layouts
 * - Allows icon color to follow CSS custom properties
 */
.d12-icon-wrap,
.d12-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex: 0 0 auto;
}

/**
 * Shared size + color hooks for non-card inline SVG systems.
 */
.d12-icon-wrap {
	width: var(--d12-icon-size, 2rem);
	height: var(--d12-icon-size, 2rem);
	color: var(--d12-icon-color, currentColor);
}

/**
 * Make injected inline SVG fill its generic wrapper.
 *
 * The helper adds .d12-svg-icon to the <svg> element.
 */
.d12-icon-wrap .d12-svg-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/**
 * Optional generic size modifiers for non-card usages.
 */
.d12-icon-wrap--sm {
	--d12-icon-size: 1rem;
}

.d12-icon-wrap--md {
	--d12-icon-size: 2rem;
}

.d12-icon-wrap--lg {
	--d12-icon-size: 3rem;
}

.d12-icon-wrap--xl {
	--d12-icon-size: 4rem;
}

/* ============================================================
   CARD WIDGET ICON MODE
   ============================================================ */

/**
 * Icon box used by the Card widget.
 *
 * This is the visible "background box" behind the icon.
 * Its size is controlled by the Elementor "Icon Box Size" control.
 */
.d12-card__icon-wrap {
	width: var(--d12-card-icon-wrap, 3rem);
	height: var(--d12-card-icon-wrap, 3rem);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/**
 * Card icon container.
 *
 * Important:
 * - This element must fill the icon box so the SVG/icon can be centered
 *   correctly and background/radius controls behave as expected.
 * - The wrapper color is inherited by SVGs that use currentColor.
 */
.d12-card__icon {
	width: 100%;
	height: 100%;
	color: inherit;
}

/**
 * Inline SVG rendered inside the Card widget.
 *
 * This is the key rule that makes the Elementor "Icon Size" control work
 * for 12D SVG icons loaded from the plugin.
 */
.d12-card__icon .d12-svg-icon {
	width: var(--d12-card-icon-size, 2rem);
	height: var(--d12-card-icon-size, 2rem);
	display: block;
	fill: currentColor;
}

/**
 * Elementor library icons inside the Card widget.
 *
 * These use font-size rather than width/height.
 */
.d12-card__icon--elementor i,
.d12-card__icon--elementor svg {
	font-size: var(--d12-card-icon-size, 2rem);
	width: var(--d12-card-icon-size, 2rem);
	height: var(--d12-card-icon-size, 2rem);
}

/* End of file svg-icons.css */