/**
 * soapKit — Icon Box
 *
 * Base layout only. Every visual property is exposed as an Elementor control,
 * and Elementor's generated CSS is enqueued *after* this file, so keep
 * specificity low (0,2,0 at most) and let the panel always win.
 *
 * Custom properties consumed here (set by the widget controls):
 *   --skib-icon-bg      default icon tile background
 *   --skib-transition   transition duration in ms
 */

.soapkits-icon-box {
	--skib-icon-bg: #7c3aed1a;
	--skib-transition: 300ms;

	position: relative;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Inner container — the actual flex box.
 * When "Apply Link To: Whole box" is used this element becomes an <a>, so the
 * layout rules have to work identically for both tags.
 * ---------------------------------------------------------------------- */

.soapkits-icon-box__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	transition-property: background-color, background-image, border-color, box-shadow, color, transform;
	transition-duration: var(--skib-transition, 300ms);
	transition-timing-function: ease;
}

a.soapkits-icon-box__inner {
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.soapkits-icon-box__content {
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Icon position.
 * The widget emits these classes from the resolved flex-direction, which keeps
 * elements saved before the `position` control emitted real CSS values
 * (left / top / right) rendering exactly as they did.
 * ---------------------------------------------------------------------- */

.soapkits-icon-box--top > .soapkits-icon-box__inner   { flex-direction: column; }
.soapkits-icon-box--left > .soapkits-icon-box__inner  { flex-direction: row; }
.soapkits-icon-box--right > .soapkits-icon-box__inner { flex-direction: row-reverse; }

/* -------------------------------------------------------------------------
 * Icon tile
 * ---------------------------------------------------------------------- */

.soapkits-icon-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	transition-property: color, background-color, border-color, box-shadow, transform;
	transition-duration: var(--skib-transition, 300ms);
	transition-timing-function: ease;
}

/* The icon size control drives font-size, so sizing the glyphs in `em` keeps
 * font icons and inline SVGs in step — and stops an unsized SVG from
 * stretching into a giant black shape inside the flex column. */
.soapkits-icon-box__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.soapkits-icon-box__icon i {
	font-size: 1em;
}

.soapkits-icon-box__icon-link {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Icon View presets.
 * These only shape the tile — colours, borders and spacing stay with the
 * controls, so anything set in the panel overrides the preset.
 * ---------------------------------------------------------------------- */

.soapkits-icon-box--view-default .soapkits-icon-box__icon {
	background: none;
	border: 0;
	padding: 0;
}

.soapkits-icon-box--view-stacked .soapkits-icon-box__icon {
	background-color: var(--skib-icon-bg);
	border-radius: 50%;
	padding: 0.65em;
}

.soapkits-icon-box--view-framed .soapkits-icon-box__icon {
	background: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	padding: 0.65em;
}

/* -------------------------------------------------------------------------
 * Text
 * ---------------------------------------------------------------------- */

.soapkits-icon-box__title {
	display: block;
	margin: 0;
	color: inherit;
}

a.soapkits-icon-box__title {
	text-decoration: none;
}

.soapkits-icon-box__description {
	margin: 0;
}

.soapkits-icon-box__description > :first-child { margin-top: 0; }
.soapkits-icon-box__description > :last-child  { margin-bottom: 0; }