.c-nlink {
    display        : flex;
    margin-top     : var(--margin-md);
    gap            : var(--margin-xs);
    text-decoration: none;
}

.c-nlink-stroke,
.c-nlink-fill {
    border-radius  : var(--rounding);
    align-items    : center;
    justify-content: center;
    font-size      : var(--font-size-xl);
    font-weight    : var(--font-weight-bold);
}

.c-nlink-stroke>.c-nlink-label,
.c-nlink-fill>.c-nlink-label {
    text-align: center;
}

.c-nlink-sober>.c-nlink-label {
    flex-grow: 1;
}

.c-nlink-stroke {
    border : var(--border-thin) solid var(--univ-primary);
    padding: var(--margin-xs) var(--margin-md);
}

.c-nlink-fill {
    background-color: var(--reverse-bg);
    color           : var(--reverse-fg);
    padding         : var(--margin-xs) var(--margin-md);
}

.c-nlink-fill:visited {
    color: var(--reverse-fg);
}

.c-nlink-sober {
    border      : var(--border-thin) solid var(--main-fg);
    padding     : var(--margin-xs) var(--margin-xxs) var(--margin-xs) var(--margin-md);
    font-size   : var(--font-size-md);
    font-weight : var(--font-weight-bold);
    font-stretch: var(--font-condensed);
    color       : var(--main-fg);
    align-items : center;
    min-height  : calc(2lh + var(--margin-xxl));
}

.c-nlink-sober:visited {
    color: var(--main-fg);
}

.c-nlink>svg {
    flex-shrink: 0;
    flex-grow  : 0;
}

.c-nlink-fill>svg {
    stroke: var(--reverse-fg);
    fill  : var(--reverse-fg);
}

.c-nlink>svg {
    width : var(--icon-size);
    height: var(--icon-size);
}

.c-nlink-label {
    text-wrap-style: balance;
}