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

// adduse


.dx-pager,
.dx-pagination {
  padding-top: $generic-pagination-paddings;
  padding-bottom: $generic-pagination-paddings;
  border-top: 1px solid $base-border-color;

  .dx-page,
  .dx-page-size,
  .dx-navigate-button {
    outline: none;
  }

  &.dx-state-focused {
    .dx-page:focus,
    .dx-page-size:focus,
    .dx-navigate-button:focus {
      outline: 2px solid $pagination-outline-color;
      outline-offset: -2px;
    }
  }

  &.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-pagination-page-padding-top $generic-pagination-page-padding-left-right $generic-pagination-page-padding-bottom;
    }

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

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

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

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