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

.related-pages {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.related-pages.section--color-primary {
    /* --color-background: var(--root-color-background--primary); */
}

.related-pages.section--color-secondary {
    /* --color-background: var(--root-color-background--secondary); */
}

.related-pages.section--color-support {
    /* --color-background: var(--root-color-background--support); */
}

.related-pages.section--color-grey {
    /* --color-background: var(--root-color-background--grey); */
}

.related-pages__header {
    /* --color-text: var(--root-color-text); */
    /* --font-family: initial; */
    /* --font-size: initial; */
    /* --font-style: initial; */
    /* --font-weight: initial; */
    /* --line-height: initial; */
}

.section--color-primary .related-pages__header {
    --color-text: var(--root-color--white);
}

.section--color-secondary .related-pages__header {
    --color-text: var(--root-color--white);
}

.section--color-support .related-pages__header {
    --color-text: var(--root-color--white);
}

.section--color-grey .related-pages__header {
     --color-text: var(--root-color-text);
}

.section--color-primary.related-pages .pagination {
    /*--color: var(--root-color--lighten);*/
}

.section--color-primary.related-pages .pagination__direction {
    --color: var(--root-color--white);
}

.section--color-primary.related-pages .pagination__link[aria-disabled="true"] .pagination__direction {
    /*--color: var(--root-color--lighten);*/
}

.section--color-primary.related-pages .pagination__link:active .pagination__direction,
.section--color-primary.related-pages .pagination__link:focus .pagination__direction,
.section--color-primary.related-pages .pagination__link:hover .pagination__direction {
    --color: var(--root-color--white-dark);
}

.section--color-primary.related-pages .pagination__icon {
    --color: var(--root-color--white);
}

.section--color-primary.related-pages .pagination__link[aria-disabled="true"] .pagination__icon {
    /*--color: var(--root-color--lighten);*/
}

.section--color-primary.related-pages .pagination__link:active .pagination__icon,
.section--color-primary.related-pages .pagination__link:focus .pagination__icon,
.section--color-primary.related-pages .pagination__link:hover .pagination__icon {
    --color: var(--root-color--white-dark);
}

.section--color-primary.related-pages .pagination__current {
    --color: var(--root-color--white);
}

.section--color-secondary.related-pages .pagination {
    /*--color: var(--root-color--lighten);*/
}

.section--color-secondary.related-pages .pagination__direction {
    --color: var(--root-color--white);
}

.section--color-secondary.related-pages .pagination__link[aria-disabled="true"] .pagination__direction {
    --color: var(--root-color--lighten);
}

.section--color-secondary.related-pages .pagination__link:active .pagination__direction,
.section--color-secondary.related-pages .pagination__link:focus .pagination__direction,
.section--color-secondary.related-pages .pagination__link:hover .pagination__direction {
    --color: var(--root-color--white-dark);
}

.section--color-secondary.related-pages .pagination__icon {
    --color: var(--root-color--white);
}

.section--color-secondary.related-pages .pagination__link[aria-disabled="true"] .pagination__icon {
    /*--color: var(--root-color--lighten);*/
}

.section--color-secondary.related-pages .pagination__link:active .pagination__icon,
.section--color-secondary.related-pages .pagination__link:focus .pagination__icon,
.section--color-secondary.related-pages .pagination__link:hover .pagination__icon {
    --color: var(--root-color--white-dark);
}

.section--color-secondary.related-pages .pagination__current {
    --color: var(--root-color--white);
}

.section--color-support.related-pages .pagination {
    --color: var(--root-color--lighten);
}

.section--color-support.related-pages .pagination__direction {
    --color: var(--root-color--white);
}

.section--color-support.related-pages .pagination__link[aria-disabled="true"] .pagination__direction {
    --color: var(--root-color--lighten);
}

.section--color-support.related-pages .pagination__link:active .pagination__direction,
.section--color-support.related-pages .pagination__link:focus .pagination__direction,
.section--color-support.related-pages .pagination__link:hover .pagination__direction {
    --color: var(--root-color--white-dark);
}

.section--color-support.related-pages .pagination__icon {
    --color: var(--root-color--white);
}

.section--color-support.related-pages .pagination__link[aria-disabled="true"] .pagination__icon {
    --color: var(--root-color--lighten);
}

.section--color-support.related-pages .pagination__link:active .pagination__icon,
.section--color-support.related-pages .pagination__link:focus .pagination__icon,
.section--color-support.related-pages .pagination__link:hover .pagination__icon {
    --color: var(--root-color--white-dark);
}

.section--color-support.related-pages .pagination__current {
    --color: var(--root-color--white);
}

.section--color-grey.related-pages .pagination {
    /*--border-color: var(--root-color-border);*/
}

.section--color-grey.related-pages .pagination__direction {
    /*--color: var(--root-color-text-link);*/
}

.section--color-grey.related-pages .pagination__link[aria-disabled="true"] .pagination__direction {
    /*--color: var(--root-color-text-link--disabled);*/
}

.section--color-grey.related-pages .pagination__link:active .pagination__direction,
.section--color-grey.related-pages .pagination__link:focus .pagination__direction,
.section--color-grey.related-pages .pagination__link:hover .pagination__direction {
    /*--color: var(--root-color-text-link--hover);*/
}

.section--color-grey.related-pages .pagination__icon {
    /*--color: var(--root-color-text-link);*/
}

.section--color-grey.related-pages .pagination__link[aria-disabled="true"] .pagination__icon {
    /*--color: var(--root-color-text-link--disabled);*/
}

.section--color-grey.related-pages .pagination__link:active .pagination__icon,
.section--color-grey.related-pages .pagination__link:focus .pagination__icon,
.section--color-grey.related-pages .pagination__link:hover .pagination__icon {
    /*--color: var(--root-color-text-link--hover);*/
}

.section--color-grey.related-pages .pagination__current {
    /*--color: var(--root-color-text);*/
}

.related-pages__header {
    margin-top: 0;
}

.related-pages .related-pages__header + .cards {
    margin-top: 2rem;
}

@media (min-width: 30em) {
    .related-pages .cards {
        grid-column-start: 1;
        grid-column-end: span 2;
    }
}



.related-pages {
    font-size: var(--font-size, 1rem);
}