$kui--pagination-height: 2.375em;
$kui--pagination-background-color: var(--color-stripe-01);

body[kui-theme-style] .bx--pagination {
  background-color: $kui--pagination-background-color;
  height: $kui--pagination-height;
  font-size: 0.875em;
  line-height: 1.125em;
  border-top-color: var(--color-table-border3);

  span.bx--pagination__text {
    margin-left: 1em;
  }
  .bx--pagination__left .bx--pagination__text {
    margin-right: 0.0625em;
  }

  .bx--select__item-count .bx--select-input,
  span.bx--pagination__text,
  .bx--select--inline .bx--select-input {
    color: var(--color-text-02);
  }

  .bx--select-input__wrapper:hover .bx--select-input,
  .bx--select-input:hover {
    background-color: var(--color-ui-03);
  }

  .bx--select__arrow {
    fill: var(--color-text-02);
  }

  .bx--pagination__button {
    fill: var(--color-text-01);
    padding: 0 0.1875em;

    &:focus {
      outline-color: var(--color-brand-03);
    }
  }

  .bx--pagination__button--no-index {
    fill: var(--color-text-02);
    svg {
      filter: opacity(0.5);
    }
  }

  .bx--select-input:focus {
    outline-color: var(--color-brand-03);
  }

  .bx--select-input,
  .bx--pagination__button {
    border: none;
  }

  .bx--pagination__button:not(.bx--pagination__button--no-index):hover {
    background-color: var(--color-table-border3);
  }
}

body[kui-theme-style] .sidecar-visible {
  .bx--pagination__left {
    .bx--form-item,
    label.bx--pagination__text {
      /* left: hide the items per page if the sidecar is open */
      display: none;
    }

    span.bx--pagination__text {
      margin: 0;
    }
  }
  .bx--pagination__right {
    .bx--form-item,
    .bx--pagination__text {
      /* hide the "1 of N pages" text if the sidecar is open */
      display: none;
    }
  }
}
