/*
  <!-- icon-only -->
  <button class="button--trigger" aria-label="Logout" type="button">
    <div class="svg-icon--logout">
      <svg viewBox="0 0 24 24">...</svg>
    </div>
  </button>

  <!-- label-only -->
  <button class="button--submit" type="submit">
    <span>Submit</span>
  </button>

  <!-- icon + label -->
  <button class="button--menu" aria-expanded="false" aria-haspopup="true" popovertarget="{idref}" type="button">
    <div class="svg-icon--chevron-down" data-is-active="false"><svg viewBox="0 0 24 24">...</svg></div>
    <span>2 Tasks</span>
  </button>

  <!-- toggle button -->
  <button class="button--toggle" aria-pressed="true" type="button">
    <span>Dark Mode</span>
  </button>

  <!-- link button -->
  <button class="button--link" type="button">
    <div class="svg-icon--arrow-right"><svg viewBox="0 0 24 24">...</svg></div>
    <span>Link</span>
  </button>
*/

button, a.button {
  --bg: #f9f9f9;
  --bg-a: #ffff;
  --bg-h: #fdfdfd;
  --bs-h: 0 1px 4px -1px #0004;
  --bs-a: 0 1px 1px -1px #0001;

  align-items: center;
  appearance: none;
  background-color: var(--bg);
  border: none;
  border-radius: var(--br, 1lh);
  box-shadow: var(--bs, 0 1px 4px -2px #0003);
  display: inline-flex;
  font-size: var(--fs, var(--fs2));
  gap: var(--s1x);
  justify-content: center;
  padding-block: var(--pb, var(--s2));
  padding-inline: var(--pi, var(--s3));
  position: relative;
  user-select: none;
  white-space: nowrap;

  > span { text-box: trim-both cap alphabetic; user-select: none !important; }

  header & {
    &:is(.button--menu, .button--trigger, .button--link, .button--toggle, .button--switch) {
      min-height: 1.8rem;
    }
  }

  &:is(.button--menu, .button--link) { flex-direction: row-reverse; gap: var(--s1); }

  &.button--link {
    --bg: var(--cp-l8);
    --bg-a: #fff;
    --bg-h: var(--cp-l8);
    --fg: var(--cp-d1);
    --icon-color: var(--cp-d1);
    gap: var(--s1);
  }

  &.bare {
    --bg: transparent;
    --bg-h: transparent;
    --fg: var(--cp-d1);
    box-shadow: none;
    gap: var(--s1);
    &.delete { --icon-color-h: #c00; --bg-h: #c001; --bg-a: #c002; }
  }

  &[type=submit] {
    --bg: var(--cp-d1);
    --bg-h: var(--cp);
    --bg-a: var(--cp-d1);

    --bs-h: 0 1px 4px -1px #000b;
    --bs-a: 0 1px 1px -1px #0006;

    --fg: #eee;
    --fs: var(--fs3);
    --fg-h: #fff;
    box-shadow: var(--bs, 0 2px 4px -2px #0009);
    padding: var(--pb, var(--s2));
    padding-inline: var(--pi, var(--s6));
    &[inert] { box-shadow: none; filter: saturate(.15); opacity: .65; }
  }

  &[aria-busy=true] {
    span { visibility: hidden; }
    background-color: var(--busy-color, #999);
    box-shadow: none;
    pointer-events: none;
    &::after {
      background-color: #0006;
      content: '';
      inset: .35em;
      mask-image: url(/images/spinner.svg);
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
      position: absolute;
    }
  }

  &[type=reset] {
    --bg: unset;
    --bg-h: unset;
    --bs: unset;
    --fg: var(--cp-d3);
    --fs: var(--fs3);

    &[inert] { display: none; }
  }

  &[inert]:not([aria-selected]):not([aria-busy]):not([type=submit]) {
    filter: saturate(.15);
    > span { opacity: .4; }
  }

  &:has(> span):has(> div) { align-items: center; display: flex; gap: var(--s1x); }

  &:focus-visible { outline: 1px solid #0003; }
  &:is(:focus-visible, :hover) {
    background-color: var(--bg-h);
    box-shadow: var(--bs-h);
    svg { scale: 1.05; }
  }

  &:active { background-color: var(--bg-a); box-shadow: var(--bs-a); }

  &[aria-checked=true] {
    > * { scale: .98; translate: 0 1px; }
    --bg: var(--cp-l7);
    --bs:
      0 0 0 1px #0001,
      inset 0 1px 4px 0 #0002,
      inset 0 -.5px 0 0 #fff,
      inset 0 .5px 0 0 #0001;
    --bs-h: var(--bs);
    --bs-a: var(--bs);
  }
}