dialog {
  background-color: var(--panel-bg);
  border: none;
  border-radius: var(--panel-radius);
  padding: var(--panel-padding);
  max-width: min(90vw, 120ch);
  min-width: min(90vw, 80ch);
  overflow-x: hidden;
  color: var(--color-text);
  /* box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.3); */
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

dialog[open] {
  animation: dialog-open 0.2s ease-out;
}

@keyframes dialog-open {
  from {
    opacity: 0;
    transform: translateY(-1em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mail-compose-form {
  h3 {
    margin-block-end: var(--block-space);
  }
}

.mail-compose-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-block-start: var(--block-space);
}

.mail-preview {
  margin-block-start: var(--block-space);
}

.mail-preview-content {
  background: var(--input-bg);
  border-radius: calc(var(--button-size) / 4);
  padding: var(--block-space);
  max-height: 20rem;
  overflow-y: auto;

  h4, h5, h6 {
    margin-block: 0.5rem;
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      padding: 0.25rem 0.5rem;
      text-align: left;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    th {
      font-weight: 600;
    }
  }
}

.mail-preview-placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

.mail-preview-rendered {
  h4 {
    font-size: 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

.mail-success {
  text-align: center;
  padding: 2rem;

  p {
    font-size: 1.2em;
    margin-bottom: 1rem;
  }
}

.mail-dialog-trigger {
  display: inline;

  > button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
  }
}

.mail-no-email-warning {
  padding: 1rem;
  background: rgba(255, 200, 0, 0.15);
  border-radius: calc(var(--button-size) / 4);
  margin-block-end: 1rem;

  p {
    margin: 0;

    &:first-child {
      font-weight: 600;
    }
  }
}

.mail-recipient {
  margin-block-end: 0.5rem;

  label {
    display: inline;
    margin-right: 0.5em;
  }
}