/* purgecss start ignore */
/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename-dev.css, then process with Laravel Mix (1. run `sudo npm install` 2. Configure with `webpack.mix.js` 3. `npm run watch` to constantly monitor and compile into prod/)

*/


/* GROUP COMPONENTS / PAGINATION
=================================================== */
/* Notes...

    - see the COMPONENTS / FRAMEWORK / (NON CORE) / BUTTONS / TYPES group for animation

*/

/* HTML Example...

    .c-paging
        .c-paging__info
            "Page 1 of 2"
        .c-paging__buttons
            .c-btn.c-btn--pagination(or .c-btn--pagination-single for single posts)
                a
                    Newer
            .c-btn.c-btn--pagination(or .c-btn--pagination-single for single posts)
                a
                    Older

*/
/* GROUP COMPONENTS / PAGINATION / LAYOUT
=================================================== */
.c-paging__buttons {
    display: flex;
    justify-content: center
}

/* .c-paging__info {
    @apply --t-text-style-1-strong;
} */

/* Custom */
@media (max-width: 599px) {
    .c-btn--pagination:not(.c-btn--pagination-single) span {
        /* Hide text because there's not enough room */
        /* START SCREEN READER TEXT
        --------------------------- */
        clip: rect(1px, 1px, 1px, 1px);

        position: absolute!important;
        overflow: hidden;
        width: 1px;
        height: 1px;
        /* END SCREEN READER TEXT
        ------------------------- */
    }

    /* Center the icons since there is no text */
    .c-btn--pagination:not(.c-btn--pagination-single) .c-btn__left svg {
        position: relative;
        /* Visually center */
        right: -0.3em;
        margin-right: 0;
    }

    .c-btn--pagination:not(.c-btn--pagination-single) .c-btn__right svg {
        position: relative;
        /* Visually center */
        left: -0.3em;
        margin-left: 0;
    }
}
/* GROUP COMPONENTS / PAGINATION / SPACING
=================================================== */
.c-paging {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    padding-block-end: var(--spacing-l-4);
}

.c-paging .c-btn,
.c-paging .c-btn a {
    /* Cancel defaults */
    margin-right: 0;
}

.c-btn--pagination + .c-btn--pagination {
    margin-left: var(--spacing-s);
}

/* .c-paging .c-btn {
    margin-top: var(--spacing-l);
} */

.c-paging .c-btn a {
    /* Needed for when previous and next are side by side. This should already be set as flex by the Atoms > Buttons group */
    /* display: flex; */
    margin-bottom: var(--spacing-m);
}

@media (min-width: 400px) {
    .c-btn--pagination + .c-btn--pagination {
        /* Increase */
        margin-left: var(--spacing-m);
    }
}
/* GROUP COMPONENTS / PAGINATION
=================================================== */
.c-paging {
    text-align: center;
}
/* purgecss end ignore */