:host {
    /* @doc Define a cor do label de informação dfa paginação. */
    --ez-pagination__info--color: var(--color--petroleum-500);

    /* @doc Define o espaçamento entre o texto de informação e os botões de controle. */
    --ez-pagination__info--margin-right: var(--space--sm);

    /* @doc Define o peso da fonte do texto de informação . */
    --ez-pagination__info--text-weight: var(--text-weight--medium);

    /* @doc Define o tamanho da fonte do texto de informação . */
    --ez-pagination__info--font-size: var(--text--medium);

    /* @doc Define o peso da fonte do texto de intervalo da informação . */
    --ez-pagination__info-range--font-weight: var(--font-weight--bold);

    /* @doc Define o espaçamento lateral entre as opções de páginas do modo numérico . */
    --ez-pagination__pages-option-padding: var(--space--nano);

    /* @doc Define a cor de texto das opções de páginas do modo numérico . */
    --ez-pagination__pages-option-color: var(--color--petroleum-500);

    /* @doc Define a o peso da fonte do texto das opções de páginas do modo numérico . */
    --ez-pagination__pages-option-weight: var(--text-weight--medium);

    /* @doc Define a o tamanho da fonte do texto das opções de páginas do modo numérico . */
    --ez-pagination__pages-option-size: var(--text--medium);

}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.info {
    color: var(--ez-pagination__info--color);
    margin-right: var(--ez-pagination__info--margin-right);
    font-weight: var(--ez-pagination__info--text-weight);
    font-size: var(--ez-pagination__info--font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.info-range {
    font-weight: var(--ez-pagination__info-range--font-weight);
}

.controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.controls-compact {
    gap: var(--space--2xs);
}

.pages-options {
    display: flex;
    align-items: center;
    padding: 0 var(--ez-pagination__pages-option-padding);
}

.page-button {
    color: var(--ez-pagination__pages-option-color);
    font-weight: var(--ez-pagination__pages-option-weight);
    font-size: var(--ez-pagination__pages-option-size);
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.current-page {
    color: var(--color--primary);
}

.page-info {
    margin: 0 8px;
}

.ellipsis {
    color: var(--ez-pagination__pages-option-color);
    font-weight: var(--ez-pagination__pages-option-weight);
    font-size: var(--ez-pagination__pages-option-size);
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}