/* ===== UI Hyperlink Component Styles ===== */

/* Base Hyperlink Styles */
.ui-hyperlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    line-height: 1.5;
}

.ui-hyperlink.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hyperlink Text */
.ui-hyperlink-text {
    transition: all 0.3s ease;
}

/* Icons */
.ui-hyperlink-icon {
    font-size: 0.875em;
    transition: all 0.3s ease;
}

.ui-hyperlink-external-icon {
    font-size: 0.75em;
    margin-left: 4px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Icon positions */
.icon-left {
    margin-right: 2px;
}

.icon-right {
    margin-left: 2px;
}

/* ===== SIZE VARIATIONS ===== */

/* Small Size */
.ui-hyperlink[data-size="small"] {
    font-size: 0.875rem;
    gap: 4px;
    padding: 1px 3px;
}

.ui-hyperlink[data-size="small"] .ui-hyperlink-icon {
    font-size: 0.8em;
}

.ui-hyperlink[data-size="small"] .ui-hyperlink-external-icon {
    font-size: 0.7em;
    margin-left: 3px;
}

/* Normal Size (Default) */
.ui-hyperlink[data-size="normal"] {
    font-size: 1rem;
    gap: 6px;
    padding: 2px 4px;
}

/* Large Size */
.ui-hyperlink[data-size="large"] {
    font-size: 1.125rem;
    gap: 8px;
    padding: 3px 5px;
}

.ui-hyperlink[data-size="large"] .ui-hyperlink-icon {
    font-size: 0.9em;
}

.ui-hyperlink[data-size="large"] .ui-hyperlink-external-icon {
    font-size: 0.8em;
    margin-left: 5px;
}

/* ===== UNDERLINE VARIATIONS ===== */

.ui-hyperlink[data-underline="true"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ui-hyperlink[data-underline="false"] {
    text-decoration: none;
}

/* ===== HOVER EFFECTS ===== */

/* Default Hover */
.ui-hyperlink[data-hover="default"]:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Fade Hover */
.ui-hyperlink[data-hover="fade"]:hover {
    opacity: 0.8;
}

/* No Hover */
.ui-hyperlink[data-hover="none"]:hover {
    text-decoration: none;
    opacity: 1;
}

/* Icon animations on hover */
.ui-hyperlink:hover .ui-hyperlink-icon {
    transform: scale(1.1);
}

.ui-hyperlink:hover .ui-hyperlink-external-icon {
    opacity: 1;
    transform: translateX(2px);
}

/* ===== THEME VARIATIONS ===== */

/* Primary Theme */
.ui-hyperlink[data-theme="primary"] {
    --hyperlink-color: var(--primary);
    --hyperlink-hover-color: var(--primary-400);
    color: var(--gray) !important;
}

.ui-hyperlink[data-theme="primary"]:hover {
    color: var(--gray-400);
}

/* Secondary Theme */
.ui-hyperlink[data-theme="secondary"] {
    --hyperlink-color: var(--gray-400);
    --hyperlink-hover-color: var(--gray-500);
    --hyperlink-focus-color: rgba(107, 114, 128, 0.5);
    --hyperlink-glow-color: rgba(107, 114, 128, 0.4);
    color: var(--hyperlink-color);
}

.ui-hyperlink[data-theme="light"]:hover {
    color: var(--hyperlink-hover-color);
}

/* ===== EXTERNAL LINK INDICATORS ===== */

.ui-hyperlink[data-external="true"] {
    position: relative;
}

.ui-hyperlink[data-external="true"]:after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    background-color: var(--hyperlink-color);
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.ui-hyperlink[data-external="true"]:hover:after {
    opacity: 1;
    transform: scale(1.2);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
    .ui-hyperlink {
        gap: 4px;
        padding: 1px 3px;
    }

    .ui-hyperlink-external-icon {
        margin-left: 3px;
    }

    .ui-hyperlink[data-size="large"] {
        font-size: 1rem;
        gap: 6px;
    }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {

    .ui-hyperlink,
    .ui-hyperlink-icon,
    .ui-hyperlink-external-icon {
        transition: none;
    }

    .ui-hyperlink:hover .ui-hyperlink-icon,
    .ui-hyperlink:hover .ui-hyperlink-external-icon {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ui-hyperlink {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

    .ui-hyperlink:focus {
        outline-width: 3px;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .ui-hyperlink {
        color: #000 !important;
        text-decoration: underline !important;
    }

    .ui-hyperlink[data-external="true"]:after {
        display: none;
    }

    .ui-hyperlink-external-icon {
        display: none;
    }
}

/* ===== CUSTOM COLOR SUPPORT ===== */

.ui-hyperlink[style*="--hyperlink-color"] {
    color: var(--hyperlink-color) !important;
}

.ui-hyperlink[style*="--hyperlink-hover-color"]:hover {
    color: var(--hyperlink-hover-color) !important;
}