/* Cryptosystems Meet: one state system for every button.

   How it works
   - Components pick a look by setting the rest variables --btn-bg,
     --btn-fg, --btn-hover, --btn-press (directly or via a variant below).
   - Toggle states set --btn-state-* (only this file does), which win
     over the rest look without any specificity fights.
   - The states themselves are painted once, here:
       rest            var(--btn-bg) / var(--btn-fg)
       :hover          var(--btn-hover)              hover-capable pointers only
       :active         var(--btn-press) + inset highlight ring + slight scale
       [data-pressing] same as :active (set by JS while Space/Enter is held)
       :focus-visible  2px ring var(--color-focus-ring), keyboard only
       :disabled       var(--opacity-disabled), no hover/press, not-allowed
   - Motion comes from tokens; tokens.css zeroes it for reduced motion.
   Load order: tokens.css, buttons.css, meet-shell.css. */

/* ---------- Rest defaults: neutral ---------- */
:where(.cs-btn, .tile, .join, .hang, .themes button, .hostish, .auth-back,
    .chat-x, .people-x, .img-lightbox-x, .cs-confirm-go, .cs-confirm-cancel,
    .chat-compose [type="submit"], .chat-emoji, .chat-emoji-pop button,
    .settings-picker-btn, .settings-picker-option, .settings-invite-label button,
    .cs-picker-btn, .cs-picker-option) {
  --btn-bg: var(--btn-neutral-bg);
  --btn-fg: var(--btn-neutral-fg);
  --btn-hover: var(--btn-neutral-hover);
  --btn-press: var(--btn-neutral-press);
}

/* ---------- Variants ---------- */
/* primary: Join, Host, Done, Stop sharing, chat Send */
:where(.cs-btn--primary, .join, .cs-confirm-go, .chat-compose [type="submit"]) {
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--btn-primary-fg);
  --btn-hover: var(--btn-primary-hover);
  --btn-press: var(--btn-primary-press);
}
/* danger: hang up */
:where(.cs-btn--danger, .hang) {
  --btn-bg: var(--btn-danger-bg);
  --btn-fg: var(--btn-danger-fg);
  --btn-hover: var(--btn-danger-hover);
  --btn-press: var(--btn-danger-press);
}
/* ghost: text controls, close glyphs, list options */
:where(.cs-btn--ghost, .hostish, .cs-confirm-cancel, .themes button, .chat-x, .people-x,
       .chat-emoji-pop button, .settings-picker-option, .cs-picker-option) {
  --btn-bg: var(--btn-ghost-bg);
  --btn-fg: var(--btn-ghost-fg);
  --btn-hover: var(--btn-ghost-hover);
  --btn-press: var(--btn-ghost-press);
}
:where(.chat-emoji-pop button, .settings-picker-option, .cs-picker-option) { --btn-fg: var(--color-fg); }
/* field-like triggers (device pickers) */
:where(.settings-picker-btn, .cs-picker-btn) {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-fg);
  --btn-hover: var(--color-surface-raised);
  --btn-press: var(--btn-neutral-press);
}

/* ---------- Toggle states ---------- */
/* Selected / on: theme choice, open pane, share on, media on. */
:where(.cs-btn, .tile, .chat-emoji)[aria-pressed="true"],
:where(.tile.is-on, .chat-emoji[aria-expanded="true"]),
:where(.cs-picker-option, .settings-picker-option, .chat-emoji-tab)[aria-selected="true"] {
  --btn-state-bg: var(--btn-selected-bg);
  --btn-state-hover: var(--btn-selected-hover);
}
:where(.themes button)[aria-pressed="true"] {
  --btn-state-bg: var(--btn-primary-bg);
  --btn-state-fg: var(--btn-primary-fg);
  --btn-state-hover: var(--btn-primary-hover);
  --btn-state-press: var(--btn-primary-press);
}
/* Media toggles with an off glyph (mic, camera, speaker) read as muted
   when not pressed: a calm danger tint, never a shout. */
:where(.tile, .cs-btn)[data-off][aria-pressed="false"] {
  --btn-state-bg: var(--btn-off-bg);
  --btn-state-fg: var(--btn-off-fg);
  --btn-state-hover: var(--btn-off-hover);
  --btn-state-press: var(--btn-off-press);
}

/* ---------- Paint ---------- */
:is(.cs-btn, .tile, .join, .hang, .themes button, .hostish, .auth-back,
    .chat-x, .people-x, .img-lightbox-x, .cs-confirm-go, .cs-confirm-cancel,
    .chat-compose [type="submit"], .chat-emoji, .chat-emoji-pop button,
    .settings-picker-btn, .settings-picker-option, .settings-invite-label button,
    .cs-picker-btn, .cs-picker-option) {
  background-color: var(--btn-state-bg, var(--btn-bg));
  color: var(--btn-state-fg, var(--btn-fg));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
  transition:
    background-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    outline-color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

/* ---------- Hover ---------- */
@media (hover: hover) {
  :is(.cs-btn, .tile, .join, .hang, .themes button, .hostish, .auth-back,
    .chat-x, .people-x, .img-lightbox-x, .cs-confirm-go, .cs-confirm-cancel,
    .chat-compose [type="submit"], .chat-emoji, .chat-emoji-pop button,
    .settings-picker-btn, .settings-picker-option, .settings-invite-label button,
    .cs-picker-btn, .cs-picker-option):hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-state-hover, var(--btn-hover));
  }
}

/* ---------- Pressed: visible highlight ---------- */
:is(.cs-btn, .tile, .join, .hang, .themes button, .hostish, .auth-back,
    .chat-x, .people-x, .img-lightbox-x, .cs-confirm-go, .cs-confirm-cancel,
    .chat-compose [type="submit"], .chat-emoji, .chat-emoji-pop button,
    .settings-picker-btn, .settings-picker-option, .settings-invite-label button,
    .cs-picker-btn, .cs-picker-option):is(:active, [data-pressing]):not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--btn-state-press, var(--btn-press));
  box-shadow: inset 0 0 0 var(--press-ring-width) var(--btn-press-ring);
  transform: scale(var(--press-scale));
}

/* ---------- Focus ring (keyboard only) ---------- */
:is(.cs-btn, .tile, .join, .hang, .themes button, .hostish, .auth-back,
    .chat-x, .people-x, .img-lightbox-x, .cs-confirm-go, .cs-confirm-cancel,
    .chat-compose [type="submit"], .chat-emoji, .chat-emoji-pop button,
    .settings-picker-btn, .settings-picker-option, .settings-invite-label button,
    .cs-picker-btn, .cs-picker-option):focus-visible {
  outline-color: var(--color-focus-ring);
}
:is(.settings-picker-option, .cs-picker-option):focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

/* ---------- Disabled ---------- */
:is(.cs-btn, .tile, .join, .hang, .themes button, .hostish, .auth-back,
    .chat-x, .people-x, .img-lightbox-x, .cs-confirm-go, .cs-confirm-cancel,
    .chat-compose [type="submit"], .chat-emoji, .chat-emoji-pop button,
    .settings-picker-btn, .settings-picker-option, .settings-invite-label button,
    .cs-picker-btn, .cs-picker-option):is(:disabled, [aria-disabled="true"]) {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Text fields share the focus language. */
:is(.name, .chat-compose textarea, .chat-emoji-search, #set-invite):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(.cs-btn, .tile, .join, .hang, .themes button, .hostish, .auth-back,
    .chat-x, .people-x, .img-lightbox-x, .cs-confirm-go, .cs-confirm-cancel,
    .chat-compose [type="submit"], .chat-emoji, .chat-emoji-pop button,
    .settings-picker-btn, .settings-picker-option, .settings-invite-label button,
    .cs-picker-btn, .cs-picker-option) {
    transition: none;
    transform: none;
  }
}