/**
 * Elcogen Link Widget Styles
 *
 * Custom link component with multiple sizes, states, and icon support
 * Based on Figma design system
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ============================================
   Link Wrapper
   ============================================ */

.elcogen-link-wrapper {
	display: inline-block;
}

/* ============================================
   Base Link Styles
   ============================================ */

.elcogen-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-regular);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	transition: var(--transition-color);
	cursor: pointer;
}

/* ============================================
   Link Sizes
   ============================================ */

/* Extra Small - 0.875rem font size, 1.3125rem line height */
.elcogen-link--extra-small {
	font-size: var(--font-size-body-small);
	line-height: var(--line-height-body-small);
}

.elcogen-link--extra-small .elcogen-link__icon-left,
.elcogen-link--extra-small .elcogen-link__icon-right {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
}

.elcogen-link--extra-small .elcogen-link__icon-left svg,
.elcogen-link--extra-small .elcogen-link__icon-right svg {
	width: 1rem;
	height: 1rem;
}

/* Small - 1rem font size, 1.5625rem line height */
.elcogen-link--small {
	font-size: var(--font-size-body-base);
	line-height: var(--line-height-body-base);
}

.elcogen-link--small .elcogen-link__icon-left,
.elcogen-link--small .elcogen-link__icon-right {
	width: var(--spacing-baseline-24);
	height: var(--spacing-baseline-24);
	font-size: var(--font-size-body-xlarge);
}

.elcogen-link--small .elcogen-link__icon-left svg,
.elcogen-link--small .elcogen-link__icon-right svg {
	width: var(--spacing-baseline-24);
	height: var(--spacing-baseline-24);
}

/* Regular (Default) - 1.125rem font size, 1.75rem line height */
.elcogen-link--regular {
	font-size: var(--font-size-body-medium);
	line-height: var(--line-height-body-medium);
}

.elcogen-link--regular .elcogen-link__icon-left,
.elcogen-link--regular .elcogen-link__icon-right {
	width: var(--spacing-baseline-24);
	height: var(--spacing-baseline-24);
	font-size: var(--font-size-body-xlarge);
}

.elcogen-link--regular .elcogen-link__icon-left svg,
.elcogen-link--regular .elcogen-link__icon-right svg {
	width: var(--spacing-baseline-24);
	height: var(--spacing-baseline-24);
}

/* ============================================
   Link States
   ============================================ */

/* Default State */
.elcogen-link {
	color: var(--color-cobalt-blue-400);
	gap: var(--spacing-baseline-08);
}

/* Hover State */
.elcogen-link:hover {
	color: var(--color-text-secondary);
}

/* Active State */
.elcogen-link:active {
	color: var(--color-text-secondary);
}

/* Focus State */
.elcogen-link:focus {
	outline: var(--focus-outline-width) solid var(--focus-outline-color);
	outline-offset: var(--focus-outline-offset);
}

/* Visited State */
.elcogen-link:visited {
	color: var(--color-text-secondary);
}

/* ============================================
   Icon Styles
   ============================================ */

.elcogen-link__icon-left,
.elcogen-link__icon-right {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	color: inherit;
	transition: var(--transition-color);
}


.elcogen-link__icon-left svg,
.elcogen-link__icon-right svg {
	display: block;
	max-width: none;
}

.elcogen-link__icon-left svg path,
.elcogen-link__icon-right svg path {
	stroke: currentColor;
}

.elcogen-link__icon-left i,
.elcogen-link__icon-right i {
	color: inherit;
}

/* ============================================
   Text Styles
   ============================================ */

.elcogen-link__text {
	text-decoration: underline;
	text-decoration-skip-ink: none;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 48rem) {
	/* Adjust sizes for mobile if needed */
	.elcogen-link--extra-small {
		font-size: var(--font-size-body-small);
		line-height: var(--line-height-body-small);
	}

	.elcogen-link--small {
		font-size: var(--font-size-body-base);
		line-height: var(--line-height-body-base);
	}

	.elcogen-link--regular {
		font-size: var(--font-size-body-medium);
		line-height: var(--line-height-body-medium);
	}
}

/* ============================================
   Elementor Editor Adjustments
   ============================================ */

.elementor-editor-active .elcogen-link {
	/* Prevent Elementor's default link styles from overriding */
	text-decoration: underline !important;
}