.link {
    color: var(--green-300);
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: left;
}

.link-label {
    color: var(--green-100);
    text-transform: uppercase;
    width: 10ch;
    min-width: 10ch;
    display: inline-block;
    margin: 0 1ch;
    white-space: pre;
}

.link[target="_blank"] .link-label {
    width: 9ch;
    min-width: 9ch;
}

.link[target="_blank"] .link-right-bracket::before {
    content: "-> ";
    color: var(--green-300);
    margin-left: -2ch;
}

.link.active .link-label,
.link:hover,
.link:hover .link-label,
.link:hover .link-left-bracket,
.link:hover .link-right-bracket {
    color: var(--yellow) !important;
}

.link.dimmed .link-left-bracket,
.link.dimmed .link-label,
.link.dimmed .link-right-bracket,
.link:disabled .link-left-bracket,
.link:disabled .link-right-bracket,
.link:disabled .link-label {
    color: var(--green-300);
}