/* ==========================================================================
   ASHA Arrow Button  –  arrow-button.css
   ========================================================================== */

/* ── Wrapper (alignment flex container) ─────────────────────────────────── */
.asha-arrow-btn-wrap {
	display: flex;
}

/* ── The <a> tag itself ──────────────────────────────────────────────────── */
.asha-arrow-btn {
	display:         inline-flex;
	flex-direction:  column;
	text-decoration: none;
	gap:             10px;
	cursor:          pointer;
	outline-offset:  4px;
}

/* ── Text label ──────────────────────────────────────────────────────────── */
.asha-arrow-btn__text {
	color:       #ffffff;
	line-height: 1.2;
	white-space: nowrap;
	transition:  color 300ms ease;
}

/* ── Line + arrow row ────────────────────────────────────────────────────── */
.asha-arrow-btn__line-wrap {
	display:     flex;
	align-items: center;
	color:       #ffffff; /* drives line + SVG tip via currentColor */

	/* resting width — overridden by "Line Width at Rest" control */
	width: var( --asha-line-initial, 100% );

	/* single shorthand so Elementor's transition-duration override works reliably */
	transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms ease;
}

.asha-arrow-btn:hover .asha-arrow-btn__line-wrap,
.asha-arrow-btn:focus-visible .asha-arrow-btn__line-wrap {
	/* hover width — overridden by "Line Width on Hover" control */
	width: var( --asha-line-hover, 200% );
}

/* ── Horizontal line ─────────────────────────────────────────────────────── */
.asha-arrow-btn__line {
	flex:             1 1 auto;
	min-width:        0;
	height:           1.5px;        /* overridden by Line Thickness control */
	background-color: currentColor; /* inherits from line-wrap color */
}

/* ── SVG arrowhead tip ───────────────────────────────────────────────────── */
.asha-arrow-btn__tip {
	flex-shrink: 0;
	height:      9px;   /* overridden by Arrow Size control */
	width:       auto;
	margin-left: -2px;  /* overlap line end cleanly */
	overflow:    visible;
	display:     block;
	color:       inherit;
}