/* Reusable button */
/* =============== */
/*
  A self-contained, theme-aware button base — mirrors Bootstrap's `.btn` (box
  metrics, typography, focus handling) without pulling in a colour variant.
  Colours are left to the consumer: set border/background/colour on top of
  `.pg-button` (e.g. via a block-specific class or a future `.pg-button--*`
  modifier).

    <button class="pg-button pg-button--sm my-block__action">…</button>

  Modifier:
    .pg-button--sm   smaller padding/font (mirrors Bootstrap `.btn-sm`)
*/

.pg-button {
  display: inline-block;

  padding: 0.375rem 0.75rem;

  border: var(--bs-border-width) solid transparent;
  border-radius: var(--bs-border-radius);

  background-color: transparent;
  color: var(--bs-body-color);

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;

  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5);
  }

  &:disabled,
  &.disabled {
    opacity: 0.65;
    pointer-events: none;
  }
}

/* Small size — mirrors Bootstrap `.btn-sm`. */
.pg-button--sm {
  padding: 0.25rem 0.5rem;

  border-radius: var(--bs-border-radius-sm);

  font-size: 0.875rem;
}