/* The console is built from Mosaic (sl-*) classes, which Stoplight's stylesheet already
   ships. Only what Mosaic has no class for lives here.

   Note there is no layout here: #eb-webhooks carries the same classes as Elements' own
   content pane (see webhooks-console.js), so the column width, gutters and background
   are the docs' own and stay in step with them. */

#eb-webhooks .eb-event:last-child { border-bottom: 0; }

/* "Subscribed" and "Unsubscribed" are different widths, which would reflow the row on
   every toggle. Only this cell needs pinning. */
#eb-webhooks .eb-event-state { inline-size: 108px; }

/* Mosaic has no checkbox/switch input, only the React component's markup. Sized against
   the 14px row text rather than the Try It rail's 11px. */
#eb-webhooks .eb-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 999px;
  background: var(--color-border);
  cursor: pointer;
  transition: background .15s;
}

#eb-webhooks .eb-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-canvas-pure);
  transition: transform .15s;
}

#eb-webhooks .eb-toggle:checked { background: var(--color-primary); }
#eb-webhooks .eb-toggle:checked::after { transform: translateX(14px); }

/* Saving reports here, under its own button. Mosaic has no toast, and the outcome of a save has
   to be visible without hunting for it — so this is a block with its own ground rather than a line
   of coloured text. It wraps: a rejected save can come back with a long message from the server. */
#eb-webhooks .eb-toast {
  display: none;
  margin-block-start: 12px;
  max-inline-size: 460px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
  text-align: start;
  animation: eb-toast-in .18s ease-out;
}

#eb-webhooks .eb-toast.is-shown { display: block; }
#eb-webhooks .eb-toast.is-ok { background: #e3f3e6; border-color: #b7e0c0; color: #1f7a33; }
#eb-webhooks .eb-toast.is-error { background: #fdeaea; border-color: #f0c4c4; color: #a32626; }

#eb-webhooks .eb-toast.is-pending {
  background: var(--color-canvas-100);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

@keyframes eb-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* The sample block is a Stoplight code panel; only the height cap is ours. */
#eb-webhooks .eb-sample pre {
  margin: 0;
  max-height: 320px;
  overflow: auto;
}