/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_linkhandling/Components/Typolink/OpenGemeentenLinkHandling-Typolink.css
 *
 * Variables can be set there globally or override them here!
 */

.top-links {
    --font-size: var(--root-font-size); /* Reset, use REM */
    --color-border: var(--root-color-border);
    --width-border: var(--root-border-width);
}

.top-link .link {
    --font-family: var(--root-font-family--secondary);
    --font-size: 0.833em; /* Mobile 13px / > Mobile 15px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
    --color: var(--root-color--primary);
}

.top-link .link:active,
.top-link .link:focus,
.top-link .link:hover {
    --color: var(--root-color-text);
}

.top-link .link .icon {
    --height: 0.875em;
    --color: currentColor;
}

.top-links {
    padding: 0;
    border-bottom-style: solid;
    border-top-style: solid;
    list-style: none;
    margin-top: 2rem;
}

.top-link {
    display: inline-flex;
    margin-right: 2rem;
}

.top-link .link {
    padding: 1em 0;
}

.top-link .link .icon--after {
    margin-left: 0.25em
}

.top-links {
    font-size: var(--font-size, 1rem);
    border-bottom-color: var(--color-border, hsla(0, 0%, 0%, 0.2));
    border-bottom-width: var(--width-border, 0.063rem);
    border-top-color: var(--color-border, hsla(0, 0%, 0%, 0.2));
    border-top-width: var(--width-border, 0.063rem);
}

.top-link .link {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.833em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

.top-link .link .icon {
    height: var(--height, 0.875em);
    fill: var(--color, currentColor);
}