/*
 * Shared pagination presentation, matched to the mobile home controls.
 * Legacy page-specific styles are also loaded after the shared head. Keep
 * priority confined to these pagination elements; page links stay untouched.
 */

html body .pager {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 12px 26px !important;
    border-top: 1px solid #ccc !important;
    background: #fff !important;
    text-align: center !important;
    line-height: 1 !important;
}

html body .pager::after {
    display: none !important;
}

html body .pager > .pages {
    display: flex !important;
    float: none !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* The same controls also cover lists without a .pages wrapper. */

html body .pager > :is(a, span),
html body .pager > .pages > :is(a, span) {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 24px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #555 !important;
    font: 400 13px/1 Arial, sans-serif !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    transition: none !important;
}

html body .pager > :is(a, span):is(.prev, .next, .first, .last),
html body .pager > .pages > :is(a, span):is(.prev, .next, .first, .last) {
    color: #333 !important;
    font-size: 17px !important;
}

/* The PC home previously supplied a second arrow through a pseudo-element. */

html body .pager :is(.prev, .next, .first, .last)::before {
    display: none !important;
    content: none !important;
}

html body .pager > a[href]:active,
html body .pager > .pages > a[href]:active {
    border-color: #ff3900 !important;
    background: #fff6f1 !important;
    color: #ff3900 !important;
}

html body .pager > :is(a, span):is(.current, [aria-current="page"]),
html body .pager > .pages > :is(a, span):is(.current, [aria-current="page"]) {
    border-color: #ff3900 !important;
    background: #ff3900 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

html body .pager > a:is(.current, [aria-current="page"])[href]:active,
html body .pager > .pages > a:is(.current, [aria-current="page"])[href]:active {
    border-color: #ff3900 !important;
    background: #ff3900 !important;
    color: #fff !important;
}

html body .pager a:focus-visible {
    outline: 2px solid #333 !important;
    outline-offset: 2px !important;
}

/* Favorites and conversations keep their descriptive previous/next labels. */

html body :is(.favorites-pagination, .messages-pagination) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 12px 26px !important;
    color: #555 !important;
    font: 400 13px/1 Arial, sans-serif !important;
}

html body :is(.favorites-pagination, .messages-pagination) > :is(a, span) {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #555 !important;
    font: 400 13px/1 Arial, sans-serif !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

html body :is(.favorites-pagination, .messages-pagination) > a[href]:active {
    border-color: #ff3900 !important;
    background: #fff6f1 !important;
    color: #ff3900 !important;
}

html body :is(.favorites-pagination, .messages-pagination) > span,
html body :is(.favorites-pagination, .messages-pagination) > a[aria-current="page"] {
    border-color: #ff3900 !important;
    background: #ff3900 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

html body :is(.favorites-pagination, .messages-pagination) > a:focus-visible {
    outline: 2px solid #333 !important;
    outline-offset: 2px !important;
}

html body :is(.pager, .favorites-pagination, .messages-pagination) [aria-disabled="true"] {
    border-color: #e4e7eb !important;
    background: #fff !important;
    color: #a8aeb7 !important;
    pointer-events: none !important;
    cursor: default !important;
}