/* External Link Icon for Gutenberg — Frontend Styles */

/* ---------------------------------------------------------------
   Block wrapper — block-level so it sits inside the content
   flow and never overflows or escapes its container.
--------------------------------------------------------------- */
.seli-link-block {
	display:    block;      /* was inline-block — caused overflow */
	max-width:  100%;
	box-sizing: border-box;
}

/* The anchor */
.seli-link-block a {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	text-decoration: underline;
	max-width:       100%;
}

.seli-link-block a:hover {
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Link text span
--------------------------------------------------------------- */
.seli-link-block .seli-link-text {
	text-decoration: underline;
	word-break:      break-word;
}

.seli-link-block a:hover .seli-link-text {
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Icon — Dashicons
--------------------------------------------------------------- */
.seli-link-block .seli-icon.dashicons {
	display:        inline-block;
	width:          1em;
	height:         1em;
	font-size:      1em;
	line-height:    1;
	vertical-align: middle;
	flex-shrink:    0;
	text-decoration: none;
	position:       relative;
	top:            -0.05em;
}

/* ---------------------------------------------------------------
   Icon — Font Awesome
--------------------------------------------------------------- */
.seli-link-block .seli-icon {
	font-size:      0.85em;
	line-height:    1;
	vertical-align: middle;
	flex-shrink:    0;
	text-decoration: none;
	position:       relative;
	top:            -0.05em;
}

/* Never underline the icon */
.seli-link-block a .seli-icon,
.seli-link-block a:hover .seli-icon {
	text-decoration: none;
}

/* Inline SVG icon sizing */
.seli-link-block a .seli-svg-icon {
	width:          1em;
	height:         1em;
	display:        inline-block;
	vertical-align: middle;
	flex-shrink:    0;
	position:       relative;
	top:            -0.05em;
}
