/* 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; }
}

/* 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;
}

/* 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;
}