$blue-gray-100: #cfd8dc;
$blue-gray-200: #b0bec5;
$blue-gray-700: #455a64;
$red-500: #f44336;

@mixin button-common {
  align-items: center;
  justify-content: center;
  margin: 5px;
  padding: 5px;
  min-width: 20px;
  min-height: 20px;
  font:
    12px/1 Arial,
    sans-serif;
  text-decoration: none;
}

.root {
  color: $blue-gray-700;
  background-color: #eceff1;
}

.root :global(.wds-pagination__nav-button) {
  @include button-common;

  background-color: $blue-gray-100;
}

.root :global(.wds-pagination__nav-button).disabled {
  color: $blue-gray-200;
  background-color: transparent;
}

.root :global(.wds-pagination__page-strip-inner) {
  justify-content: center;
}

.root :global(.wds-pagination__page-button) {
  @include button-common;

  background-color: $blue-gray-200;
}

.root :global(.wds-pagination__current-page) {
  @include button-common;

  background-color: $blue-gray-700;
  color: $blue-gray-100;
}

.root :global(.wds-pagination__gap) {
  @include button-common;

  background-color: $blue-gray-100;
}

.root :global(.wds-pagination__page-form),
.root :global(.wds-pagination__compact) {
  margin: 5px;
  align-items: center;
}

.root :global(.wds-pagination__page-input) {
  box-sizing: border-box;
  height: 30px;
  text-align: center;
  font:
    12px/1 Arial,
    sans-serif;
  color: inherit;
}

.root:global(.wds-pagination__nav--error) :global(.wds-pagination__page-input) {
  border-color: $red-500;
}