/**
 * components/ozi-search/css/ozi-search.css
 * Versão: 1.0.1
 *
 * Classes alinhadas com ozi-search.js v1.0.1:
 *   Paginação: .ozi-search-pagination__list, .ozi-search-pagination__btn (BEM)
 *   Highlight: .ozi-search-highlight
 *   Ativo:     .is-active
 *   Disabled:  .is-disabled
 */

/* ─── TOKENS ────────────────────────────────────────────── */

:root {
    --ozi-search-pagination-gap:       4px;
    --ozi-search-pagination-radius:    0.375rem;
    --ozi-search-pagination-height:    34px;
    --ozi-search-pagination-min-width: 34px;
    --ozi-search-pagination-font-size: 0.875rem;

    --ozi-search-pagination-color:     #495057;
    --ozi-search-pagination-bg:        #fff;
    --ozi-search-pagination-border:    #dee2e6;

    --ozi-search-pagination-hover-bg:     #f8f9fa;
    --ozi-search-pagination-hover-border: #adb5bd;

    --ozi-search-pagination-active-bg:     #0d6efd;
    --ozi-search-pagination-active-color:  #fff;
    --ozi-search-pagination-active-border: #0d6efd;

    --ozi-search-pagination-disabled-color:  #adb5bd;
    --ozi-search-pagination-disabled-bg:     #fff;
    --ozi-search-pagination-disabled-border: #dee2e6;

    --ozi-search-highlight-bg:    #fff3cd;
    --ozi-search-highlight-color: #212529;
}

/* ─── HIGHLIGHT ─────────────────────────────────────────── */

.ozi-search-highlight {
    background-color: var(--ozi-search-highlight-bg);
    color:            var(--ozi-search-highlight-color);
    border-radius:    2px;
    padding:          0 2px;
}

/* compat — classe gerada pelo JS v1.0.0 anterior */
mark.ozi-search-mark {
    background:    var(--ozi-search-highlight-bg);
    color:         var(--ozi-search-highlight-color);
    padding:       0 2px;
    border-radius: 2px;
}

/* ─── NAV DE PAGINAÇÃO ──────────────────────────────────── */

.ozi-search-pagination {
    display:         flex;
    justify-content: center;
    margin-top:      16px;
    width:           100%;
}

.ozi-search-pagination__list {
    display:     flex;
    align-items: center;
    gap:         var(--ozi-search-pagination-gap);
    list-style:  none;
    margin:      0;
    padding:     0;
}

/* ─── ITEM ──────────────────────────────────────────────── */

.ozi-search-pagination__item {
    display: inline-flex;
}

/* ─── BOTÃO ─────────────────────────────────────────────── */

.ozi-search-pagination__btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        var(--ozi-search-pagination-min-width);
    height:           var(--ozi-search-pagination-height);
    padding:          0 8px;
    font-size:        var(--ozi-search-pagination-font-size);
    font-family:      inherit;
    line-height:      1;
    color:            var(--ozi-search-pagination-color);
    background-color: var(--ozi-search-pagination-bg);
    border:           1px solid var(--ozi-search-pagination-border);
    border-radius:    var(--ozi-search-pagination-radius);
    cursor:           pointer;
    transition:       background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select:      none;
}

.ozi-search-pagination__btn:hover:not(:disabled):not(.is-active) {
    background-color: var(--ozi-search-pagination-hover-bg);
    border-color:     var(--ozi-search-pagination-hover-border);
}

.ozi-search-pagination__btn.is-active,
.ozi-search-pagination__item.is-active .ozi-search-pagination__btn {
    background-color: var(--ozi-search-pagination-active-bg);
    border-color:     var(--ozi-search-pagination-active-border);
    color:            var(--ozi-search-pagination-active-color);
    cursor:           default;
    pointer-events:   none;
}

.ozi-search-pagination__btn:disabled,
.ozi-search-pagination__item.is-disabled .ozi-search-pagination__btn {
    color:            var(--ozi-search-pagination-disabled-color);
    background-color: var(--ozi-search-pagination-disabled-bg);
    border-color:     var(--ozi-search-pagination-disabled-border);
    cursor:           not-allowed;
    pointer-events:   none;
}

/* ─── RETICÊNCIAS ───────────────────────────────────────── */

.ozi-search-pagination__ellipsis {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       var(--ozi-search-pagination-min-width);
    height:          var(--ozi-search-pagination-height);
    font-size:       var(--ozi-search-pagination-font-size);
    color:           var(--ozi-search-pagination-disabled-color);
    padding:         0 4px;
    user-select:     none;
}