/* Email Templates: one row per email. On a computer the name, the subject
   with its description under it, and the buttons sit side by side. On a
   phone they stack, so nothing scrolls sideways. */
.email-templates {
  container-type: inline-size;
  list-style: none;
  padding: 0 1rem;

  @media (min-width: 768px) { padding: 0 1.5rem; }
}

.email-templates__row {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-base-200);

  &:last-child { border-bottom: 0; }

  @container (min-width: 44rem) {
    grid-template-columns: 13rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
  }
}

.email-templates__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;

  @container (min-width: 44rem) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

.email-templates__subject {
  overflow-wrap: anywhere;
}

.email-templates__description {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
}

.email-templates__actions {
  display: flex;
  gap: 0.5rem;
}

/* Edit Email Template: Insert picture and Insert link above the Body, the
   Insert a link dialog, and how pictures show in an email's preview. */

/* The Body label on the left, the two buttons on the right. On a phone the
   buttons drop under the label. */
.template-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.template-editor__buttons {
  display: flex;
  gap: 8px;

  svg { width: 16px; height: 16px; }
}

/* The Body: written as it will look. The toolbar keeps the buttons an email
   needs (bold, italic, heading, bullets, numbers, undo, redo); pictures and links go
   in through Insert picture and Insert link. */
.template-editor__body {
  min-height: 20rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field, 0.5rem);
  background: var(--color-base-100);
  font-family: Arial, sans-serif;
  line-height: 1.6;

  img { max-width: 100%; height: auto; }

  /* Paragraphs, headings and lists spaced, and lists bulleted, as in the email. */
  > :is(div, h1, ul, ol) { margin: 0 0 1em; }
  ul, ol { padding-left: 1.5em; }
  ul { list-style: disc; }
  ol { list-style: decimal; }
}

trix-toolbar:has(+ .template-editor__body) {
  :is([data-trix-attribute="strike"], [data-trix-attribute="href"],
      [data-trix-attribute="quote"], [data-trix-attribute="code"], [data-trix-action="decreaseNestingLevel"],
      [data-trix-action="increaseNestingLevel"], .trix-button-group--file-tools) {
    display: none;
  }

  .trix-button-row { overflow-x: visible; }
}

/* A file that isn't a picture, or is too big: the reason in red under the box. */
.template-editor__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-field, 0.5rem);
  background: color-mix(in oklab, var(--color-error) 12%, transparent);
  color: var(--color-error);
  font-size: 0.9375rem;

  svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
}

/* Insert a link: the address, the words to show, and the YouTube note. */
.template-editor__link-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.template-editor__video-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-field, 0.5rem);
  background: var(--color-base-200);
  font-size: 0.9375rem;

  svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-primary); }
}

.template-editor__dialog-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Lists in an email show bullets and numbers, as a mail app shows them. */
.email-body ul { list-style: disc; }
.email-body ol { list-style: decimal; }

/* A picture or a video's thumbnail in an email fills the email's width, up to
   560px, in the template preview and in the copy on the DSP page. */
.email-body img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 8px;
}