:root {
  /* text colors */
  --editor-colors-gray-text: #5c5e63;
  --editor-colors-peach-text: #ff5b59;
  --editor-colors-pink-text: #f65385;
  --editor-colors-orange-text: #fd9038;
  --editor-colors-green-text: #0fc27b;
  --editor-colors-light-blue-text: #17bee9;
  --editor-colors-dark-blue-text: #266df0;
  --editor-colors-purple-text: #9162f9;
  /* end text colors */

  /* layout */
  --normal-content-width: 720px;
  --wide-content-width: 1152px;
  --normal-content-margin: 20px;
  --wide-content-margin: 96px;
  /* end layout */
}

/* text background colors */
[data-theme*="light"] {
  --editor-colors-gray-background: #d6d6d8;
  --editor-colors-peach-background: #ffd5d7;
  --editor-colors-pink-background: #fdd4e3;
  --editor-colors-orange-background: #ffe3cd;
  --editor-colors-green-background: #c3f0de;
  --editor-colors-light-blue-background: #c5eff9;
  --editor-colors-dark-blue-background: #c9dafb;
  --editor-colors-purple-background: #e3d8fd;
}
[data-theme*="dark"] {
  --editor-colors-gray-background: #404144;
  --editor-colors-peach-background: #593032;
  --editor-colors-pink-background: #562e3d;
  --editor-colors-orange-background: #583e2a;
  --editor-colors-green-background: #1d4a3b;
  --editor-colors-light-blue-background: #1f495c;
  --editor-colors-dark-blue-background: #223558;
  --editor-colors-purple-background: #3d325a;
}
/* end text background colors */

/* font size and style */
.editor-container {
  --color-placeholder: --alpha(var(--text-color-primary) / 50%);

  /* font sizes and line heights */
  &.large-font {
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.375rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.125rem;
    --font-size-h6: 1rem;
    --font-size-regular: 1rem;
    --font-size-code: 0.85rem;
    --font-size-list: var(--font-size-regular);

    --line-height-h1: 2.25rem;
    --line-height-h2: 2rem;
    --line-height-h3: 1.75rem;
    --line-height-h4: 1.5rem;
    --line-height-h5: 1.5rem;
    --line-height-h6: 1.5rem;
    --line-height-regular: 1.5rem;
    --line-height-code: 1.5rem;
    --line-height-list: var(--line-height-regular);
  }
  &.small-font {
    --font-size-h1: 1.4rem;
    --font-size-h2: 1.2rem;
    --font-size-h3: 1.1rem;
    --font-size-h4: 1rem;
    --font-size-h5: 0.9rem;
    --font-size-h6: 0.8rem;
    --font-size-regular: 0.8rem;
    --font-size-code: 0.8rem;
    --font-size-list: var(--font-size-regular);

    --line-height-h1: 1.8rem;
    --line-height-h2: 1.6rem;
    --line-height-h3: 1.4rem;
    --line-height-h4: 1.2rem;
    --line-height-h5: 1.2rem;
    --line-height-h6: 1.2rem;
    --line-height-regular: 1.2rem;
    --line-height-code: 1.2rem;
    --line-height-list: var(--line-height-regular);
  }

  &.mobile-font {
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.375rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.125rem;
    --font-size-h6: 1rem;
    --font-size-regular: 0.95rem;
    --font-size-code: 0.85rem;
    --font-size-list: var(--font-size-regular);

    --line-height-h1: 2.25rem;
    --line-height-h2: 2rem;
    --line-height-h3: 1.75rem;
    --line-height-h4: 1.5rem;
    --line-height-h5: 1.5rem;
    --line-height-h6: 1.5rem;
    --line-height-regular: 1.5rem;
    --line-height-code: 1.5rem;
    --line-height-list: var(--line-height-regular);
  }
  /* end font sizes and line heights */

  /* font styles */
  --font-style: "Inter Variable", sans-serif;

  &.sans-serif {
    --font-style: "Inter Variable", sans-serif;
  }
  &.serif {
    --font-style: serif;
  }
  &.monospace {
    --font-style: monospace;
  }
  /* end font styles */

  /* spacing */
  &.line-spacing-regular {
    --heading-1-padding-top: 28px;
    --heading-1-padding-bottom: 4px;
    --heading-2-padding-top: 28px;
    --heading-2-padding-bottom: 4px;
    --heading-3-padding-top: 28px;
    --heading-3-padding-bottom: 4px;
    --heading-4-padding-top: 28px;
    --heading-4-padding-bottom: 4px;
    --heading-5-padding-top: 20px;
    --heading-5-padding-bottom: 4px;
    --heading-6-padding-top: 20px;
    --heading-6-padding-bottom: 4px;
    --paragraph-padding-top: 4px;
    --paragraph-padding-bottom: 4px;
    --paragraph-padding-between: 8px;
    --list-spacing-y: 8px;
    --divider-padding-top: 4px;
    --divider-padding-bottom: 4px;
  }

  &.line-spacing-small {
    --heading-1-padding-top: 16px;
    --heading-1-padding-bottom: 4px;
    --heading-2-padding-top: 16px;
    --heading-2-padding-bottom: 4px;
    --heading-3-padding-top: 16px;
    --heading-3-padding-bottom: 4px;
    --heading-4-padding-top: 16px;
    --heading-4-padding-bottom: 4px;
    --heading-5-padding-top: 12px;
    --heading-5-padding-bottom: 4px;
    --heading-6-padding-top: 12px;
    --heading-6-padding-bottom: 4px;
    --paragraph-padding-top: 2px;
    --paragraph-padding-bottom: 2px;
    --paragraph-padding-between: 4px;
    --list-spacing-y: 0px;
    --divider-padding-top: 0px;
    --divider-padding-bottom: 4px;
  }

  &.line-spacing-mobile-regular {
    --heading-1-padding-top: 16px;
    --heading-1-padding-bottom: 4px;
    --heading-2-padding-top: 16px;
    --heading-2-padding-bottom: 4px;
    --heading-3-padding-top: 16px;
    --heading-3-padding-bottom: 4px;
    --heading-4-padding-top: 16px;
    --heading-4-padding-bottom: 4px;
    --heading-5-padding-top: 12px;
    --heading-5-padding-bottom: 4px;
    --heading-6-padding-top: 12px;
    --heading-6-padding-bottom: 4px;
    --paragraph-padding-top: 2px;
    --paragraph-padding-bottom: 2px;
    --paragraph-padding-between: 4px;
    --list-spacing-y: 0px;
    --divider-padding-top: 0px;
    --divider-padding-bottom: 4px;
  }
  /* end spacing */
}
/* end font size and style */

/* layout config */
#page-toolbar-container {
  container-name: page-toolbar-container;
  container-type: inline-size;

  .page-toolbar-content {
    --header-width: var(--normal-content-width);

    &.wide-layout {
      --header-width: var(--wide-content-width);
    }

    padding-left: calc(((100% - var(--header-width)) / 2) - 10px);
  }
}

#page-content-container {
  container-name: page-content-container;
  container-type: inline-size;

  .frame-renderer {
    --editor-content-width: var(--normal-content-width);

    &.wide-layout {
      --editor-content-width: var(--wide-content-width);
    }

    .editor-container.page-title-editor .ProseMirror,
    .document-editor-loader {
      max-width: var(--editor-content-width);
      margin: 0 auto;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .editor-container.document-editor .ProseMirror {
      & > *:not(.editor-full-width-block) {
        max-width: var(--editor-content-width);
        margin-left: auto !important;
        margin-right: auto !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      & > .editor-full-width-block {
        max-width: 100%;
        padding-inline-start: calc((100% - var(--editor-content-width)) / 2);
        padding-inline-end: var(--wide-content-margin);
      }
    }
  }
}

/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
@container page-toolbar-container (min-width: 912px) and (max-width: 1344px) {
  .page-toolbar-content.wide-layout {
    padding-left: var(--wide-content-margin) !important;
  }
}

/* keep a static padding of 96px for wide layouts for container width <912px */
@container page-toolbar-container (max-width: 912) {
  .page-toolbar-content.wide-layout {
    padding-left: var(--wide-content-margin) !important;
  }
}
/* end layout config */

/* keep a static padding of 20px for wide layouts for container width <760px */
@container page-toolbar-container (max-width: 760px) {
  .page-toolbar-content {
    padding-left: var(--normal-content-margin) !important;
  }
}
/* end layout config */

/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
@container page-content-container (min-width: 912px) and (max-width: 1344px) {
  #page-content-container .frame-renderer.wide-layout .editor-container,
  #page-content-container .frame-renderer.wide-layout .document-editor-loader,
  .page-header-container {
    padding-left: var(--wide-content-margin);
    padding-right: var(--wide-content-margin);
  }
}

/* keep a static padding of 20px for wide layouts for container width <912px */
@container page-content-container (max-width: 912px) {
  #page-content-container .frame-renderer.wide-layout .editor-container,
  #page-content-container .frame-renderer.wide-layout .document-editor-loader,
  .page-header-container {
    padding-left: var(--normal-content-margin);
    padding-right: var(--normal-content-margin);
  }
}

/* keep a static padding of 20px for normal layouts for container width <760px */
@container page-content-container (max-width: 760px) {
  #page-content-container .frame-renderer:not(.wide-layout) .editor-container,
  #page-content-container .frame-renderer:not(.wide-layout) .document-editor-loader,
  .page-header-container {
    padding-left: var(--normal-content-margin);
    padding-right: var(--normal-content-margin);
  }
}

@container page-content-container (max-width: 930px) {
  .page-summary-container {
    display: none;
  }
}
/* end layout config */