/**
 * SEO Offensive Icon - SVG Icon Styles
 *
 * Mirrors the core SP Page Builder .sppb-icon styles so every
 * existing hover effect, sizing and color feature works out of the box.
 *
 * @package SP Page Builder
 * @author SEO Offensive
 * @since 1.0.0
 */

/* ── Wrapper (identical to core .sppb-icon) ────────────────────────── */
.seooffensive-icon {
	display: block;
}

/* ── Inner container (mirrors core .sppb-icon-inner) ───────────────── */
.seooffensive-icon .sppb-icon-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: color 0.3s ease, background-color 0.3s ease,
		border-color 0.3s ease, transform 0.3s ease;
}

/* ── Inline SVG sizing ──────────────────────────────────────────────── */

/*
 * Inline SVG: size via em units driven by font-size on .sppb-icon-inner.
 *
 * We deliberately do NOT force fill: currentColor here.
 * Doing so would override fill="none" on paths, turning outline-only icons
 * into fully filled shapes. Instead we let the SVG's own fill/stroke
 * attributes stand. Paths that already reference `currentColor` will still
 * respond to the CSS `color` property set by the admin Color picker.
 *
 * `overflow: visible` prevents clipping when the SVG has no viewBox padding.
 */
.seooffensive-icon .sppb-icon-inner .seooffensive-svg-icon {
	display: block;
	width: 1em;
	height: 1em;
	overflow: visible;
	flex-shrink: 0;
	transition: color 0.3s ease;
}

/*
 * Propagate the CSS `color` value into SVG children that already use
 * `currentColor` for their fill or stroke – without touching paths
 * that have explicit colour values (e.g. fill="none").
 */
.seooffensive-icon .sppb-icon-inner .seooffensive-svg-icon [fill="currentColor"],
.seooffensive-icon .sppb-icon-inner .seooffensive-svg-icon [stroke="currentColor"] {
	transition: fill 0.3s ease, stroke 0.3s ease;
}

/* ── <img> fallback (external / non-readable SVG) ───────────────────── */
.seooffensive-icon .sppb-icon-inner .seooffensive-svg-img {
	display: block;
	max-width: 100%;
	height: auto;
	flex-shrink: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Hover effects (same class names as core icon addon) ────────────── */
.seooffensive-icon.sppb-icon-hover-effect-zoom-in .sppb-icon-inner:hover {
	transform: scale(1.2);
}

.seooffensive-icon.sppb-icon-hover-effect-zoom-out .sppb-icon-inner:hover {
	transform: scale(0.85);
}

.seooffensive-icon.sppb-icon-hover-effect-rotate .sppb-icon-inner:hover {
	transform: rotate(360deg);
}

/* ── Accessibility ──────────────────────────────────────────────────── */
.seooffensive-icon .sppb-form-label-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}