/*
 * css/custom/components/pagination.css
 */

.gp-pagination {
    margin-top    : 40px;
    margin-bottom : 50px;
}

.gp-pagination-list {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;

    margin          : 0;
    padding         : 0;
    list-style      : none;
}

.gp-pagination-item {
    margin: 0;
}

.gp-pagination-link {
    width           : 40px;
    height          : 40px;

    display         : flex;
    align-items     : center;
    justify-content : center;

    border          : 1px solid var(--odoo-gray-100);
    border-radius   : 10px;
    background      : #fff;

    color           : var(--odoo-theme-light);

    font-size       : 1rem;
    font-weight     : 500;
    line-height     : 1;
    text-decoration : none;

    transition      : background-color 0.2s ease,
                      border-color 0.2s ease,
                      color 0.2s ease;
}

.gp-pagination-link:hover {
    background-color : var(--odoo-theme-light);
    border-color     : var(--odoo-theme-light);
    color            : var(--odoo-white-100);
}

.gp-pagination-item.is-active .gp-pagination-link {
    background-color : var(--odoo-theme-light);
    border-color     : var(--odoo-theme-light);
    color            : var(--odoo-white-100);
    cursor           : default;
}

.gp-pagination-item.is-disabled .gp-pagination-link {
    background-color : #f5f5f5;
    border-color     : #eee;
    color            : #aaa;
    cursor           : not-allowed;
    pointer-events   : none;
}

.gp-pagination-link:focus-visible {
    outline        : 2px solid var(--odoo-theme-light);
    outline-offset : 3px;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .gp-pagination {
        margin-top: 30px;
    }

    .gp-pagination-list {
        gap: 6px;
    }

    .gp-pagination-link {
        width     : 36px;
        height    : 36px;
        font-size : 0.85rem;
    }
}

@media (max-width: 480px) {
    .gp-pagination {
        margin-top: 25px;
    }

    .gp-pagination-list {
        gap: 5px;
    }

    .gp-pagination-link {
        width     : 32px;
        height    : 32px;
        font-size : 0.8rem;
    }
}

@media (max-width: 380px) {
    .gp-pagination-list {
        gap: 4px;
    }

    .gp-pagination-link {
        width     : 30px;
        height    : 30px;
        font-size : 0.75rem;
    }
}