/* Styling for the alert()/confirm() replacements in app/javascript/nes_dialog.js. */

.nes-dialog--overlay {
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 1.5rem;
  background-color: #fff;
  color: #212529;
  font-size: 0.8rem;
  line-height: 1.6;
}

.nes-dialog--overlay::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

/* `.title` is also a Bulma class (2rem, weight 600, its own colour). Press Start
   2P has a single weight, so let it stay normal rather than be synth-bolded. */
.nes-dialog--overlay .title {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  font-weight: normal;
  color: inherit;
}

.nes-dialog__message {
  margin: 0 0 1.5rem;
  /* Messages come from server strings that may carry newlines. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.nes-dialog--overlay .dialog-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  /* nes.css leaves .dialog-menu unstyled, so the <menu> UA margin/padding
     (including the list indent) has to go. */
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  /* Same treatment nes.css gives `.nes-dialog.is-rounded.is-dark`, applied by
     media query so it follows the OS theme instead of a class toggle. */
  .nes-dialog--overlay {
    background-color: var(--bulma-body-background-color);
    color: #fafafa;
    border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
    border-image-outset: 0;
  }

}