/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_site/General/OpenGemeentenSite-Section.css
 *
 * Variables can be set there globally or override them here!
 */

.page-link-menu {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.page-link-menu.section--color-primary {
    /*--color-background: var(--root-color-background--primary);*/
}

.page-link-menu.section--color-secondary {
    /*--color-background: var(--root-color-background--secondary);*/
}

.page-link-menu.section--color-support {
    /*--color-background: var(--root-color-background--support);*/
}

.page-link-menu.section--color-grey {
    /*--color-background: var(--root-color-background--grey);*/
}

/* Header */
.page-link-menu__header {
    /*--color-text: var(--root-color--primary);*/
    /*--font-family: initial;*/
    /*--font-size: initial;*/
    /*--font-style: initial;*/
    /*--font-weight: initial;*/
}

.section--color-primary .page-link-menu__header {
    /*--color-text: var(--root-color--white);*/
}

.section--color-secondary .page-link-menu__header {
    /*--color-text: var(--root-color--white);*/
}

.section--color-support .page-link-menu__header {
    /*--color-text: var(--root-color--primary);*/
}

.section--color-grey .page-link-menu__header {
    /*--color-text: var(--root-color-text);*/
}

/* Button */
.page-link-menu__button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--color: var(--root-color--white);*/
}

.page-link-menu__button:active,
.page-link-menu__button:focus,
.page-link-menu__button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

.section--color-primary .page-link-menu__button {
    /*--background-color: var(--root-color--white);*/
    /*--border-top-color: var(--root-color--white);*/
    /*--border-right-color: var(--root-color--white);*/
    /*--border-bottom-color: var(--root-color--white);*/
    /*--border-left-color: var(--root-color--white);*/
    /*--color: var(--root-color--primary);*/
}

.section--color-primary .page-link-menu__button:active,
.section--color-primary .page-link-menu__button:focus,
.section--color-primary .page-link-menu__button:hover {
    /*--background-color: var(--root-color--white-dark);*/
    /*--border-top-color: var(--root-color--white-dark);*/
    /*--border-right-color: var(--root-color--white-dark);*/
    /*--border-bottom-color: var(--root-color--white-dark);*/
    /*--border-left-color: var(--root-color--white-dark);*/
}

.section--color-secondary .page-link-menu__button {
    /*--background-color: var(--root-color--white);*/
    /*--border-top-color: var(--root-color--white);*/
    /*--border-right-color: var(--root-color--white);*/
    /*--border-bottom-color: var(--root-color--white);*/
    /*--border-left-color: var(--root-color--white);*/
    /*--color: var(--root-color-text);*/
}

.section--color-secondary .page-link-menu__button:active,
.section--color-secondary .page-link-menu__button:focus,
.section--color-secondary .page-link-menu__button:hover {
    /*--background-color: var(--root-color--white-dark);*/
    /*--border-top-color: var(--root-color--white-dark);*/
    /*--border-right-color: var(--root-color--white-dark);*/
    /*--border-bottom-color: var(--root-color--white-dark);*/
    /*--border-left-color: var(--root-color--white-dark);*/
}

.section--color-support .page-link-menu__button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--color: var(--root-color--white);*/
}

.section--color-support .page-link-menu__button:active,
.section--color-support .page-link-menu__button:focus,
.section--color-support .page-link-menu__button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

.section--color-grey .page-link-menu__button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/
    /*--color: var(--root-color--white);*/
}

.section--color-grey .page-link-menu__button:active,
.section--color-grey .page-link-menu__button:focus,
.section--color-grey .page-link-menu__button:hover {
    /*--background-color: var(--root-color--primary-dark);*/
    /*--border-top-color: var(--root-color--primary-dark);*/
    /*--border-right-color: var(--root-color--primary-dark);*/
    /*--border-bottom-color: var(--root-color--primary-dark);*/
    /*--border-left-color: var(--root-color--primary-dark);*/
}

.page-link-menu .link-list__item {
    /*--color-border: var(--root-color-border);*/
    /*--width-border: var(--root-border-width);*/
}

.page-link-menu .link-list__item .link {
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--semi-bold);*/
    /*--line-height: inherit;*/
    /*--color-background: transparent;*/
    /*--color: var(--root-color-text);*/
}

.page-link-menu .link-list__item .link:active,
.page-link-menu .link-list__item .link:focus,
.page-link-menu .link-list__item .link:hover {
    /*--color-background: var(--root-color-interaction);*/
    /*--color: var(--root-color--primary);*/
}

.page-link-menu .link-list__item .icon {
    /*--color-icon: var(--root-color--secondary);*/
}

/* Primary */
.section--color-primary.page-link-menu .link-list__item {
    /*--color-border: var(--root-color--lighten);*/
}

.section--color-primary.page-link-menu .link-list__item .link {
    /*--color-background: transparent;*/
    /*--color: var(--root-color--white);*/
}

.section--color-primary.page-link-menu .link-list__item .link:active,
.section--color-primary.page-link-menu .link-list__item .link:focus,
.section--color-primary.page-link-menu .link-list__item .link:hover {
    /*--color-background: var(--root-color--lighten-less);*/
    /*--color: var(--root-color--white)*/
}

.section--color-primary.page-link-menu .link-list__item .icon {
    /*--color-icon: var(--root-color--white);*/
}

/* Secondary */
.section--color-secondary.page-link-menu .link-list__item {
    /*--color-border: var(--root-color--lighten);*/
}

.section--color-secondary.page-link-menu .link-list__item .link {
    /*--color-background: transparent;*/
    /*--color: var(--root-color--white);*/
}

.section--color-secondary.page-link-menu .link-list__item .link:active,
.section--color-secondary.page-link-menu .link-list__item .link:focus,
.section--color-secondary.page-link-menu .link-list__item .link:hover {
    /*--color-background: var(--root-color--lighten-less);*/
    /*--color: var(--root-color--white)*/
}

.section--color-secondary.page-link-menu .link-list__item .icon {
    /*--color-icon: var(--root-color--white);*/
}

/* Support */
.section--color-support.page-link-menu .link-list__item {
    /*--color-border: var(--root-color--darken);*/
}

.section--color-support.page-link-menu .link-list__item .link {
    /*--color-background: transparent;*/
    /*--color: var(--root-color-text);*/
}

.section--color-support.page-link-menu .link-list__item .link:active,
.section--color-support.page-link-menu .link-list__item .link:focus,
.section--color-support.page-link-menu .link-list__item .link:hover {
    /*--color-background: var(--root-color--darken-less);*/
    /*--color: var(--root-color--primary);*/
}

.section--color-support.page-link-menu .link-list__item .icon {
    /*--color-icon: var(--root-color--secondary);*/
}

/* Grey */
.section--color-grey.page-link-menu .link-list__item {
    /*--color-border: var(--root-color--darken);*/
}

.section--color-grey.page-link-menu .link-list__item .link {
    /*--color-background: transparent;*/
    /*--color: var(--root-color-text);*/
}

.section--color-grey.page-link-menu .link-list__item .link:active,
.section--color-grey.page-link-menu .link-list__item .link:focus,
.section--color-grey.page-link-menu .link-list__item .link:hover {
    /*--color-background: var(--root-color--darken-less);*/
    /*--color: var(--root-color--primary);*/
}

.section--color-grey.page-link-menu .link-list__item .icon {
    /*--color-icon: var(--root-color--secondary);*/
}

.page-link-menu__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: var(--column-gap, 2rem);
}

.page-link-menu__header {
    margin-top: 0;
}

.page-link-menu .page-link-menu__header + .link-list {
    margin-top: 2rem;
}

.page-link-menu__button-below {
    margin-right: auto;
}

@media (min-width: 30em) {
    .page-link-menu__container {
        grid-template-columns: 1fr auto;
    }

    .page-link-menu__button:not(.page-link-menu__button-below) {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        margin-right: 0;
    }

    .page-link-menu .link-list {
        grid-column-start: 1;
        grid-column-end: span 2;
    }
}



.page-link-menu {
    font-size: var(--font-size, 1rem);
}