@use "../abstracts" as *;

/*----------------------------------------
    PAGINATION STYLE
------------------------------------------*/
.global__pagination {
    margin-top: rem(60);
    background: #eff3fa;
    padding: rem(10);
    border-radius: rem(50);
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 767px) {
        gap: 10px;
        margin-top: 15px;
    }

    .pg-btn {
        background: #fff;
        padding: rem(15) rem(50) rem(15) rem(10);
        border-radius: rem(40);
        color: $color-heading;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: rem(15);
        transition: all 0.3s ease;
        font-size: rem(17);

        @media (max-width: 767px) {
            font-size: rem(14);
            padding: rem(5) rem(10) rem(5) rem(5);
            gap: 5px;
        }

        .pg-icon {
            width: rem(80);
            height: rem(50);
            background: #1c1b21;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
            font-size: rem(18);
            transition: all 0.3s ease;

            @media (max-width: 767px) {
                font-size: rem(14);
                width: rem(40);
                height: rem(30);
            }
        }

        &--next {
            padding: rem(15) rem(10) rem(15) rem(50);

            @media (max-width: 767px) {
                padding: rem(5) rem(5) rem(5) rem(10);
            }

            .pg-icon {
                background: $color-primary;
            }
        }

        &:hover {
            background: $color-primary;
            color: #fff;

            .pg-icon {
                background: #fff;
                color: $color-primary;
            }
        }
    }
}