/* Élément conteneur de la fenêtre modale. */
.dialog {
  --dialog-overlay-background: var(--bg25-tertiary);
  --dialog-background-color: var(--root-background-color);
  --dialog-border-color: var(--root-text-color);
  --dialog-shadow-color: var(--root-text-color);
  --dialog-heading-font-size: var(--s1);

  position: fixed;
  z-index: 2;
  inset: 0;
  display: flex;
  margin: 0;
  background: var(--dialog-overlay-background);

  &[aria-hidden] {
    display: none;
  }

  /* Fenêtre à proprement parler. */
  .dialog-content {
    --layout-box-padding: 0;

    position: relative;
    margin: auto;
    border: 1px solid var(--dialog-border-color);
    background-color: var(--dialog-background-color);
    box-shadow: 0.5rem 0.5rem 0 0 var(--dialog-shadow-color);

    /* Barre d'en-tête. */
    header {
      overflow: hidden;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
      border-block-end: 1px solid var(--dialog-border-color);

      h2 {
        padding-inline: var(--s-1);
        font-family: BRKLY, monospace;
        font-size: var(--s0);
        font-weight: var(--brkly-font-weight-semibold);
        text-transform: uppercase;
      }

      button {
        padding: var(--s-1);
        font-weight: var(--brkly-font-weight-semibold);
      }
    }

    /* Contenu de la fenêtre. */
    main {
      display: flex;
      flex-flow: column nowrap;
      align-items: start;
      padding: var(--s1);
    }
  }
}