@layer components {
  .pagy {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2);
    gap: var(--space-2);
    a {
      width: var(--space-8);
      height: var(--space-8);
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      background: var(--color-white);
      color: var(--color-gray-700);

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

      &[aria-current] {
        background: var(--color-primary-100);
        border-color: var(--color-primary-600);
        color: var(--color-primary-700);
      }
    }
  }
}