/* Livemark's pager: cards sharing the row, one alone filling it, each label led by its
   chevron (Lucide, ISC, as a mask so it takes the label's colour) */
@scope (htmlpress-pager) {
  :scope {
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    display: block;
    margin-top: 2.5rem;
  }
  nav {
    display: flex;
    gap: 1rem;
  }
  a {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--htmlpress-border);
    border-radius: var(--htmlpress-radius);
    box-shadow:
      0 1px 3px 0 oklch(0 0 0 / 0.1),
      0 1px 2px -1px oklch(0 0 0 / 0.1);
    color: var(--htmlpress-text);
    font-weight: 500;
    line-height: 1.5rem;
    text-decoration: none;
    transition: background 0.15s;
  }
  a:hover {
    background: color-mix(in oklab, var(--htmlpress-surface) 50%, transparent);
  }
  small {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    color: var(--htmlpress-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }
  small::before,
  small::after {
    width: 1rem;
    height: 1rem;
    background: currentColor;
    mask: var(--chevron) center / contain no-repeat;
  }
  [rel="prev"] small::before {
    content: "";
  }
  [rel="next"] {
    text-align: right;
  }
  [rel="next"] small {
    justify-content: flex-end;
  }
  [rel="next"] small::after {
    content: "";
    rotate: 180deg;
  }
}