@layer components {
  .pagy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) 0;

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 2.5rem;
      height: 2.5rem;
      padding: 0 var(--space-2);
      color: var(--color-text);
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: var(--radius-md);

      &:hover {
        background: var(--color-gray-100);
      }

      &[aria-current] {
        color: var(--color-white);
        background: var(--color-primary-900);
      }

      &[aria-disabled="true"] {
        color: var(--color-gray-400);
      }
    }
  }
}