dialog {
  border-radius: 10px;
  max-width: 80vw;
  margin: auto;

  text-align: center;

  trix-editor {
    text-align: left;
    text-transform: none;
  }

  input[type="submit"] {
    margin: 1em 0;
  }

  .close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0 0.25em;
    font-size: 1.5rem;
  }

  h1 {
    margin: 3rem 0 1em;
  }

  form {
    width: auto;

    label {
      display: inline-block;
      width: 12em;
    }
  }

  li {
    text-align: left;
  }
}

body:has(dialog[open]) {
  overflow: hidden;
}

dialog#pdf-export-modal {
  width: 20rem;

  &[open] {
    display: block;
  }
}

.new_comment label {
  width: auto;
  margin-bottom: 1em;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1px);
}

/* images in bl_configuration operating points (projects) */
dialog#project-image {
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */

  /* Modal Content/Box for projects */
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 8% auto; /* 8% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80vw;
    text-align: center;

    img {
      max-width: 100%;
    }
  }

  /* The Close Button */
  .close {
    color: #aaa;
    position: absolute;
    right: 1rem;
    font-size: 28px;
    font-weight: bold;

    &:hover,
    &:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  }
}

dialog#user-prefs {
  form > fieldset > div {
    grid-template-columns: 22em 1fr;
  }

  label {
    width: 40ch;
  }
}

@media (min-width: 1200px) {
  dialog.columns-user-prefs {
    width: 52em;
    margin: auto;

    &[open] {
      form > fieldset {
        column-count: 3;
      }
    }
  }

  dialog.edit-assignee-modal {
    width: 18rem;

    form > div > div {
      display: block;
    }
  }
}