/* base for links */
.text-content a {
    border-bottom: 0.1rem dotted var(--text-2);

    &:hover {
        border-bottom-style: solid !important;
    }
}

/* external links */
.text-content a[href^="http://"],
.text-content a[href^="https://"] {
    &::after {
        font-size: 0;
        line-height: 1;
        content: "⬈";
        margin-inline-start: 0.5ch;
        color: var(--text-2);
        transition: 0.1s;
    }

    &:hover {
        &::after {
            font-size: 1em;
        }
    }
}

/* base relative link */
.text-content a[href^="/"] {
    border-bottom: 0.1rem dotted var(--orange-fg);
}

.text-content a[href^="/posts"] {
    border-bottom: 0.1rem dotted var(--yellow-fg);
}

.text-content a[href^="/about"] {
    border-bottom: 0.1rem dotted var(--green-fg);
}