/* An onboarding email's preview on the DSP page. */

/* What DSP Sync filled in for this DSP, and what it couldn't. */
.onboarding-email__filled,
.onboarding-email__unfilled {
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

.onboarding-email__filled {
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.onboarding-email__unfilled {
  background: color-mix(in oklab, var(--color-error) 12%, transparent);
  color: var(--color-error);
}

/* A filled-in detail can be clicked and changed for this send. */
mark[contenteditable="true"] {
  cursor: text;
}

mark[contenteditable="true"]:hover,
mark[contenteditable="true"]:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* After Edit text, the subject and body read as fields. */
.onboarding-email__editable[contenteditable="true"] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background: var(--color-base-100);
}

/* The email opens on its first lines; See more shows the rest. */
.onboarding-email__body--folded {
  max-height: 7.5rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 55%, transparent);
}

.onboarding-email__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.onboarding-email__chevron {
  width: 16px;
  height: 16px;
  transition: rotate 150ms;
}

.onboarding-email__toggle[aria-expanded="true"] .onboarding-email__chevron {
  rotate: 180deg;
}

.onboarding-email__toggle[aria-expanded="true"] .onboarding-email__see-more,
.onboarding-email__toggle[aria-expanded="false"] .onboarding-email__see-less {
  display: none;
}

/* Edit text, Close and Send sit on one line. On a phone each column starts at
   its own label's width and the leftover space is shared, so none is cut off. */
.onboarding-email__actions {
  flex-wrap: nowrap;

  @media (width < 640px) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    justify-content: stretch;
    gap: 8px;

    > form {
      display: contents;
    }

    .btn {
      margin: 0;
      padding-inline: 12px;
      white-space: nowrap;
    }
  }
}