@import "./styles/01-foundations.css";

/* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */
.sg-email-preview-viewport {
  width: var(--dimension-email-body-max-width);
  background: var(--surface-portal-background);
}

.sg-email-preview-body {
  width: 100%;
}

.sg-email-header {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding:
    var(--card-segment-padding-vertical)
    var(--layout-page-content-inset-inline);
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-portal-header);
}

.sg-email-header__main {
  width: 100%;
}

.sg-email-header__brand {
  margin: 0;
  color: var(--text-portal-header-brand);
  font-size: var(--font-size-portal-header-brand);
}

.sg-email-card {
  width: calc(100% + (2 * var(--card-segment-padding-horizontal)));
  margin-inline: calc(-1 * var(--card-segment-padding-horizontal));
}

.sg-email-card .sg-card-segment--body > .sg-body {
  color: var(--text-card-body);
}

.sg-email-card-action-segment {
  align-items: flex-end;
}