@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../../base/pager";

// adduse


.dx-pager {
  padding-top: $generic-pager-paddings;
  padding-bottom: $generic-pager-paddings;

  &.dx-light-mode {
    .dx-page-sizes {
      min-width: 42px;
    }

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

    .dx-page-index {
      min-width: 19px;
    }
  }

  .dx-pages {
    .dx-page {
      padding: $generic-pager-page-padding-top $generic-pager-page-padding-left-right $generic-pager-page-padding-bottom;
    }

    .dx-separator {
      padding-left: $generic-pager-separator-paddings;
      padding-right: $generic-pager-separator-paddings;
    }

    .dx-navigate-button {
      width: 9px;
      height: $generic-pager-navbutton-height;
      padding: $generic-pager-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 {
    border-radius: $pager-page-border-radius;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
  }

  .dx-page-sizes .dx-page-size {
    padding-left: $generic-pager-pagesize-padding-left;
    padding-right: $generic-pager-pagesize-padding-right;
    padding-top: $generic-pager-pagesize-padding-top;
    padding-bottom: $generic-pager-pagesize-padding-bottom;
  }

  .dx-pages,
  .dx-page-sizes {
    .dx-selection {
      color: $pager-page-selected-color;
      border-color: $pager-page-selected-border-color;
      background-color: $pager-page-selected-bg;
    }
  }
}