/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_site/General/OpenGemeentenSite-Section.css
 *
 * Variables can be set there globally or override them here!
 */
.pagination {
    --font-size: var(--root-font-size); /* Reset, use REM */
    --border-width: var(--root-border-width);
    --border-color: var(--root-color-border);
}

.pagination__link {
    --width-icon: 1em;
}

.pagination__link[aria-disabled="true"] {
    --color: var(--root-color-text-link--disabled);
}

.pagination__direction {
    --color: var(--root-color-text-link);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.pagination__link[aria-disabled="true"] .pagination__direction {
    --color: var(--root-color-text-link--disabled);
}

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

.pagination__icon {
    --color: var(--root-color-text-link);
}

.pagination__link[aria-disabled="true"] .pagination__icon {
    --color: var(--root-color-text-link--disabled);
}

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

.pagination__current {
    --color: var(--root-color-text);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.pagination {
    display: flex;
    margin-top: 3em;
    padding-top: 2em;
}

.pagination__column {
    display: flex;
    flex-direction: row;
}

.pagination__current {
    margin: 0 2.5rem;
}

.pagination__link {
    display: inline-flex;
    flex-direction: row;
    text-decoration: none;
}

.pagination__link[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
}

.pagination__previous .pagination__link-column-2,
.pagination__next .pagination__link-column-1 {
    display: none;
}

.pagination__direction {
    text-decoration: underline;
}

.pagination__link:hover .pagination__direction {
    text-decoration: none;
}

.pagination__link[aria-disabled="true"] .pagination__direction {
    text-decoration: none;
}

.pagination__icon {
    display: inline-flex;
    align-items: center;
}

.pagination__icon .icon {
    fill: currentColor;
}

.pagination__previous .pagination__link-column-1 {
    margin-right: 1rem;
}

.pagination__next .pagination__link-column-2 {
    margin-left: 1rem;
}

@media (min-width: 30rem) {
    .pagination {
        flex-direction: row;
    }

    .pagination__current {
        margin: 0 2rem;
    }

    .pagination__previous .pagination__link-column-2,
    .pagination__next .pagination__link-column-1 {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 62rem) {
    .pagination__current {
        margin: 0 3.125rem;
    }
}

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

.pagination__previous + .pagination__next .pagination__link {
    margin-left: calc(var(--width-icon, 1em) + 1rem);
}

.pagination__direction {
    color: var(--color, inherit);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

.pagination__current {
    color: var(--color, inherit);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

.pagination__icon {
    color: var(--color, inherit);
    height: calc(var(--font-size, 1rem) * var(--line-height, 1.6));
}

.pagination__icon .icon {
    height: var(--width-icon, 1em);
}

@media (min-width: 30rem) {
    .pagination__next .pagination__link {
        margin-left: 0;
    }
}