/*
 * Path: /databass/css/200-footer.css
 * ------------------------------------------------------------
 * Footer bar: per-page selector, pagination, totals.
 */

/* ------------------------------------------------------------
   FOOTER CONTAINER
------------------------------------------------------------ */

.databass-footer-container {
    width: 100%;
    padding: 0.6rem;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.2s ease;
}

/* ------------------------------------------------------------
   FOOTER ROOT
------------------------------------------------------------ */

.databass-footer {
    width: 100%;
    margin: 0;
    padding: 0.6rem;

    display: flex;
    flex-direction: row;
    align-items: center;

    background: var(--databass-color-white);
    border-radius: 0 0 var(--databass-border-radius) var(--databass-border-radius) !important;
    box-shadow: var(--databass-shadow-table);

    text-align: center;
    font-size: 0.75rem;
}

/* ------------------------------------------------------------
   LEFT / CENTER / RIGHT PANELS
------------------------------------------------------------ */

.databass-footer-left,
.databass-footer-center,
.databass-footer-right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.databass-footer-left {
    width: 33%;
    justify-content: flex-start;
}

.databass-footer-center {
    width: 34%;
    justify-content: center;
}

.databass-footer-right {
    width: 33%;
    justify-content: flex-end;
}

.databass-total-records strong {
    color: var(--databass-color-primary);
}

/* ------------------------------------------------------------
   PER-PAGE SELECT
------------------------------------------------------------ */

.databass-footer .databass-per-page {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* ------------------------------------------------------------
   PAGINATION
------------------------------------------------------------ */

.databass-pagination {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

/* Default pagination button */
.databass-pagination .databass-pagination-button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.3rem 0.6rem;
    border-radius: var(--databass-border-radius);

    background: var(--databass-color-grey1);
    border: none;
    cursor: pointer;

    transition: all 0.15s ease;
}

/* Active page */
.databass-pagination .databass-pagination-button.active {
    background: var(--databass-color-primary) !important;
    color: var(--databass-color-white) !important;
    transform: scale(1.1);
}

/* Disabled buttons */
.databass-pagination .databass-pagination-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Hover */
.databass-pagination .databass-pagination-button:not(.disabled):hover {
    background: var(--databass-color-primary-75pc);
    color: var(--databass-color-white);
}

.databass-page-number-container {
    width: 16rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
}