@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icon_fonts" as *;
@use "../../base/pagination";
@use "../gridBase/sizes" as *;

// adduse


.dx-pager,
.dx-pagination {
  padding: $material-pagination-paddings $material-grid-base-cell-horizontal-padding;

  &.dx-light-mode {
    .dx-page-sizes {
      min-width: $material-pagination-light-pagesizes-min-width;

      .dx-selectbox {
        min-width: $material-pagination-light-pagesizes-min-width;
      }
    }

    .dx-page-index {
      min-width: $material-pagination-light-pageindex-min-width;
    }

    .dx-pages {
      .dx-page-indexes {
        vertical-align: middle;
      }

      .dx-navigate-button,
      .dx-light-pages {
        vertical-align: middle;
      }
    }
  }

  .dx-pages {
    .dx-page {
      padding: $material-pagination-page-padding;
      line-height: $material-pagination-page-line-height;
    }

    .dx-separator {
      padding-left: $material-pagination-separator-paddings;
      padding-right: $material-pagination-separator-paddings;
    }

    .dx-navigate-button {
      width: 9px;
      height: $material-pagination-navbutton-height;
      padding: $material-pagination-navbutton-paddings;
    }

    .dx-prev-button {
      @include dx-icon(chevronleft);
    }

    .dx-next-button {
      @include dx-icon(chevronright);
    }

    .dx-prev-button,
    .dx-next-button {
      @include dx-icon-font-centered-sizing(21px);
    }
  }

  .dx-page,
  .dx-page-size {
    font-size: $material-pagination-page-font-size;

    &:hover {
      background-color: $pagination-page-hovered-bg;
    }

    border-radius: 20px;
  }

  .dx-page-sizes .dx-page-size {
    &:first-child,
    &.dx-first-child {
      margin-left: 0;
    }

    padding: $material-pagination-page-padding;
    line-height: $material-pagination-page-line-height;
  }

  .dx-pages,
  .dx-page-sizes {
    .dx-selection {
      font-weight: 500;
      background-color: $pagination-page-selected-bg;
      color: $pagination-page-selected-color;
    }
  }
}