.pagination {
  padding: 0.5rem;
}

.pagy {
  display: inline-flex;
  isolation: isolate;
  border-radius: 0.375rem;

  a {
    display: inline-flex;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    align-items: center;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-inset: inset;
    --tw-ring-color: #D1D5DB;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: #ffffff;
    border-radius: 0.25rem;
    text-decoration: none;
  }

  a:hover {
    background-color: #F3F4F6;
  }

  a:not([href]) {
    color: #D1D5DB;
    cursor: default;
  }

  a[aria-current="page"] {
    color: #ffffff;
    background-color: var(--primary-color);
  }

  label {
    display: inline-block;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    background-color: #E5E7EB;
  }

  label input {
    border-radius: 0.375rem;
    border-style: none;
    background-color: #F3F4F6;
  }
}
