/* Styled link — styling is driven entirely by CSS custom properties set on
   the <a> element by the StyledLink mark. Hover properties (--sl-h-*) fall
   back to their normal counterpart (--sl-*) in the mark when omitted, so the
   :hover rule only needs to read the override variables. */
.styled-link {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    padding: var(--sl-py) var(--sl-px);
    border-radius: var(--sl-r);
    border: var(--sl-b);
    background-color: var(--sl-bg);
    color: var(--sl-c);
    transition: background-color 0.15s ease, color 0.15s ease,
        border-color 0.15s ease, border-radius 0.15s ease,
        padding 0.15s ease;
}

.styled-link:hover {
    padding: var(--sl-h-py) var(--sl-h-px);
    border-radius: var(--sl-h-r);
    border: var(--sl-h-b);
    background-color: var(--sl-h-bg);
    color: var(--sl-h-c);
}