/* =========================
   LINK HOVER BASE
========================= */
.link-hover {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}

/* =========================
   ICON EFFECT (DEFAULT)
========================= */
.link-hover.icon .hover-icon {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease-out;
    font-size: 0.85em;
    vertical-align: middle;
}

.link-hover.icon:hover .hover-icon,
.link-hover.icon:focus-visible .hover-icon {
    opacity: 1;
    transform: translateX(0);
}

/* =========================
   UNDERLINE EFFECT
========================= */
.link-hover.underline {
    display: inline-block;
}

.link-hover.underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.2s ease;
}

.link-hover.underline:hover::after,
.link-hover.underline:focus-visible::after {
    width: 100%;
}