@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/font" as ft;
@use "../base/space" as sp;
@use "../base/size" as sz;

// Pagination
//
//   <nav class="qo-pagination">
//     <button class="qo-page-btn">‹</button>
//     <button class="qo-page-btn qo-page-btn-active">1</button>
//   </nav>

.qo-pagination {
  display: flex;
  align-items: center;
  gap: sp.$space-1;
}

.qo-page-btn {
  height: sz.$control-height-sm;
  min-width: sz.$control-height-sm;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: bo.$border-width-sm solid cl.$border-light;
  border-radius: bo.$border-radius-sm;
  background-color: cl.$background-default;
  color: cl.$text-dark;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-sm;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

  &:hover:not(:disabled) {
    background-color: cl.$background-primary-soft;
    border-color: cl.$border-primary-soft;
    color: cl.$text-primary;
  }

  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }

  &:disabled {
    opacity: 0.48;
    cursor: not-allowed;
  }

  &.qo-page-btn-active {
    border-color: cl.$border-primary-soft;
    background-color: cl.$background-primary-soft;
    color: cl.$text-primary;
    font-weight: ft.$font-weight-semibold;
  }
}

// The rows-per-page select sits in the same ramp as the page buttons.
.qo-page-size {
  height: sz.$control-height-sm;
  min-width: sz.$control-height-sm;
  padding: 0 9px;
  border: bo.$border-width-sm solid cl.$border-light;
  border-radius: bo.$border-radius-sm;
  background-color: cl.$background-default;
  color: cl.$text-dark;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-sm;
  cursor: pointer;

  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
}