/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/2815083
 * @preserve
 */


/**
 * @file
 * Styles for Claro's Pagination.
 */

:root {
    /**
  * Pager.
  */
    /* --space-m × 2 */
    /* 2px */
}

.pager {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.pager__items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    margin: 1rem 0;
    /* LTR */
    list-style: none;
    text-align: center;
    font-weight: bold;
}

[dir="rtl"] .pager__items {
    margin: 1rem 0;
}

.pager__item {
    display: inline-block;
    margin-right: 0.25rem;
    margin-left: 0.25rem;
    vertical-align: top;
}

.pager__link,
.pager__item--current {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2rem;
    height: 2rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    text-decoration: none;
    color: #545560;
    background: #fff;
    /* Make sure that the text is visible on dark background. */
    line-height: 1;
}

.pager__link:hover,
.pager__link:focus,
.pager__link:active {
    text-decoration: none;
}

.pager__link:hover,
.pager__link.is-active:hover {
    color: #545560;
    background: #e6ecf8;
}

.pager__link--action-link {
    border-radius: 0.125rem;
}


/* Active number link. */

.pager__link.is-active,
.pager__item--current {
    color: #fff;
    background: #003cc5;
}

.pager__item--first .pager__link::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2V14' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M14 2L8 8L14 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--previous .pager__link::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2L5 8L11 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--next .pager__link::after {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14L11 8L5 2' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--last .pager__link::after {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14L14 2.00001' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M2 14L8 8.00001L2 2.00001' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
    position: relative;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
}

.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before {
    margin-right: .75rem;
}

.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
    margin-left: .75rem;
}

[dir="rtl"] .pager__item--first .pager__link::before,
[dir="rtl"] .pager__item--previous .pager__link::before,
[dir="rtl"] .pager__item--next .pager__link::after,
[dir="rtl"] .pager__item--last .pager__link::after {
    transform: scaleX(-1);
}

.pager__item--mini {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.pager__link--mini {
    border-radius: 50%;
}


/**
 * On the mini pager, remove margins for the previous and next icons.
 * Margins are not needed here as there is no accompanying text.
 */

.pager__link--mini::before {
    margin-right: 0;
    margin-left: 0;
}

.pager__item-title--backwards {
    /* margin-left: 0.5rem; */
    /* LTR */
}

[dir="rtl"] .pager__item-title--backwards {
    margin-right: 0.5rem;
    margin-left: 0;
}

.pager__item-title--forward {
    /* margin-right: 0.5rem; */
    /* LTR */
}

[dir="rtl"] .pager__item-title--forward {
    margin-right: 0;
    margin-left: 0.5rem;
}

@media (-ms-high-contrast: active) {
    .pager__item a:hover {
        text-decoration: underline;
    }
    .pager__link.is-active {
        border: 0.125rem solid #fff;
    }
}