/* 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 `.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;
}


/* Chrome buttons */
/* ============== */
/*
  A page's own controls — the things that act on the screen you are looking at rather
  than on one item within it: "Add Event", the month arrows, "New Packing List", the
  actions on a packing list's bar.

  Started life as the calendar's `.calendar-button`; it lives here because the packing
  lists wear the same look, and two copies of it would drift apart. Compact and heavy
  rather than roomy, because these sit several to a strip on a phone.

    <a class="pg-button pg-button--chrome">Add Event</a>

  Modifiers (composable, e.g. `pg-button pg-button--chrome pg-button--sm`):
    .pg-button--chrome   neutral - the default for a page control
    .pg-button--accent   filled with the accent, for the one action a bar is really for
    .pg-button--primary,
    .pg-button--danger,
    .pg-button--success,
    .pg-button--warning  the same box, tinted with the matching Bootstrap subtle/emphasis
                         pair, for an action whose colour is its meaning rather than its
                         rank on the bar
    .pg-button--icon     square, for a control whose whole label is its icon
    .pg-button--sm       shorter, for a control that sits inside a row rather than on a bar

  --accent and the semantic modifiers answer different questions and are not swaps for one
  another: --accent says "this is the one thing this strip is for", while --danger says
  "this destroys something". A bar has at most one --accent; it can have several semantics.
*/

.pg-button--chrome,
.pg-button--accent,
.pg-button--primary,
.pg-button--danger,
.pg-button--success,
.pg-button--warning,
.pg-button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.3125rem;

  min-height: 2.25rem;
  padding: 0 0.875rem;

  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.5625rem;

  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.pg-button--chrome.pg-button--sm,
.pg-button--accent.pg-button--sm,
.pg-button--primary.pg-button--sm,
.pg-button--danger.pg-button--sm,
.pg-button--success.pg-button--sm,
.pg-button--warning.pg-button--sm {
  min-height: 1.875rem;
  padding: 0 0.625rem;
}

.pg-button--chrome {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.pg-button--chrome:hover,
.pg-button--chrome:focus-visible {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}

/* One per strip: the thing the strip is for. Anything more and the accent stops meaning
   "this one". */
.pg-button--accent {
  background-color: var(--pg-accent);
  border-color: transparent;
  color: var(--pg-accent-contrast);
}

.pg-button--accent:hover,
.pg-button--accent:focus-visible {
  filter: brightness(1.06);
  color: var(--pg-accent-contrast);
}

.pg-button--accent:disabled,
.pg-button--accent.disabled {
  filter: none;
}

/* Semantic tints — hover darkens the fill in place rather than inverting to solid, to
   match --chrome's own hover and keep the family looking like one system. */
.pg-button--primary {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);

  &:hover,
  &:focus-visible {
    background-color: color-mix(in oklab, var(--bs-primary-bg-subtle), var(--bs-primary) 12%);
  }
}

.pg-button--danger {
  border-color: var(--bs-danger);
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);

  &:hover,
  &:focus-visible {
    background-color: color-mix(in oklab, var(--bs-danger-bg-subtle), var(--bs-danger) 12%);
  }
}

.pg-button--success {
  border-color: var(--bs-success);
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);

  &:hover,
  &:focus-visible {
    background-color: color-mix(in oklab, var(--bs-success-bg-subtle), var(--bs-success) 12%);
  }
}

.pg-button--warning {
  border-color: var(--bs-warning);
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);

  &:hover,
  &:focus-visible {
    background-color: color-mix(in oklab, var(--bs-warning-bg-subtle), var(--bs-warning) 12%);
  }
}

/* Square, for a control that is only an icon - so it doesn't sit wider than it is tall
   the way the padding above would leave it. Last, so the square wins over the padding
   whichever colour modifier it is paired with. */
.pg-button--icon {
  width: 2.25rem;
  padding: 0;

  font-size: 0.875rem;
}

.pg-button--icon.pg-button--sm {
  width: 1.875rem;
  padding: 0;
}

/* Tinted but still outlined: a row of icon buttons shouldn't turn into a row of coloured
   chips, so a colour modifier here moves the border and the glyph and leaves the fill
   alone. */
.pg-button--icon.pg-button--primary,
.pg-button--icon.pg-button--danger,
.pg-button--icon.pg-button--success,
.pg-button--icon.pg-button--warning {
  background-color: transparent;
}

.pg-button--icon.pg-button--primary {
  border-color: rgba(var(--bs-primary-rgb), 0.4);
  color: var(--bs-primary-text-emphasis);
}

.pg-button--icon.pg-button--danger {
  border-color: rgba(var(--bs-danger-rgb), 0.4);
  color: var(--bs-danger-text-emphasis);
}

.pg-button--icon.pg-button--success {
  border-color: rgba(var(--bs-success-rgb), 0.4);
  color: var(--bs-success-text-emphasis);
}

.pg-button--icon.pg-button--warning {
  border-color: rgba(var(--bs-warning-rgb), 0.4);
  color: var(--bs-warning-text-emphasis);
}