/* =========================================
   MN Vertical Divider Widget
   ========================================= */

/* ── CSS Variables (defaults) ── */
/* --mn-vd-border-style  → set by 'style' control    */
/* --mn-vd-color         → set by 'color' control    */
/* --mn-vd-border-width  → set by 'weight' control   */
/* --mn-vd-element-spacing → set by spacing control  */
/* --mn-vd-icon-size     → set by 'icon_size' control */

/* ── Widget outer wrapper ── */
.mn-vdivider {
	display: flex;
	justify-content: center;
	align-items: center;   /* overridden by 'align' control via inline CSS */
	height: 100%;
	width: 100%;
	box-sizing: border-box;
}

/* ── Separator: flex column with line drawn by ::before / ::after ── */
.mn-vdivider-separator {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100px; /* default, overridden by 'height' control */
	box-sizing: border-box;
}

/* Line segments flanking the optional element */
.mn-vdivider-separator::before,
.mn-vdivider-separator::after {
	content: '';
	flex: 1;
	border-left-style: var( --mn-vd-border-style, solid );
	border-left-width: var( --mn-vd-border-width, 1px );
	border-left-color: var( --mn-vd-color, #000 );
	min-height: 4px;
}

/* ── Element (text or icon) sitting between the two line segments ── */
.mn-vdivider__element {
	flex: 0 0 auto;
	padding-block: var( --mn-vd-element-spacing, 5px );
}

/* ── Element position overrides (controlled via prefix_class) ── */

/* Top: collapse the ::before segment */
.mn-vdivider-pos-top .mn-vdivider-separator::before {
	flex: 0;
	min-height: 0;
}

/* Bottom: collapse the ::after segment */
.mn-vdivider-pos-bottom .mn-vdivider-separator::after {
	flex: 0;
	min-height: 0;
}

/* ── Text element ── */
.mn-vdivider__text {
	line-height: 1.2;
	white-space: nowrap;
}

/* ── Icon element ── */
.mn-vdivider__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var( --mn-vd-icon-size, 16px );
	width: var( --mn-vd-icon-size, 16px );
	height: var( --mn-vd-icon-size, 16px );
	line-height: 1;
}

.mn-vdivider__icon svg {
	width: var( --mn-vd-icon-size, 16px );
	height: var( --mn-vd-icon-size, 16px );
}

/* Stacked view */
.mn-vdivider-icon-view-stacked .mn-vdivider__icon {
	border-radius: 50%;
	color: #fff;
	width: calc( var( --mn-vd-icon-size, 16px ) * 2.5 );
	height: calc( var( --mn-vd-icon-size, 16px ) * 2.5 );
}

/* Framed view */
.mn-vdivider-icon-view-framed .mn-vdivider__icon {
	border-style: solid;
	border-width: 2px;
	width: calc( var( --mn-vd-icon-size, 16px ) * 2.5 );
	height: calc( var( --mn-vd-icon-size, 16px ) * 2.5 );
}