.link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--link-min-size, var(--control-min-size));
    max-inline-size: 100%;
    padding-block: var(--space-1);
    color: inherit;
    font-size: var(--fs-body);
    line-height: var(--line-height-control);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
}
.link--muted { color: var(--color-inverse-muted); }
.link--inline { display: inline; min-block-size: 0; padding: 0; text-decoration: underline; }
.link:not(.link--inactive):hover { text-decoration: underline; }
.link--inactive { cursor: default; }
@media (min-width: 75rem) {
    .link { min-block-size: 2.5rem; }
}

.link--muted:not(.link--inactive):hover { color: var(--color-on-accent); }