focus-editor {
  display: block;
  overflow-y: auto;
}
/* prevents flashing unrendered text */
focus-editor:not(:has(.focus-editor)) {
  color: transparent;
}
focus-editor {
  --line-height: 1.75rem;
  --color-grey-light: light-dark(#eee, #333);
  --color-grey-very-light: light-dark(
    rgba(240, 240, 240, 1),
    rgba(50, 50, 50, 1)
  );
  --color-grey: light-dark(rgba(175, 175, 175, 1), rgba(255, 255, 255, 0.5));
  --color-grey-lighter: #ccc;
  --transition-duration: 0s;
  &.smooth-transition {
    --transition-duration: 0.2s;
  }
  @media (prefers-reduced-motion: reduce) {
    &.smooth-transition {
      --transition-duration: 0s;
    }
  }

  --space: 1rem;
  --border-radius: 4px;
  --space-left: 0px;
  --margin-left-factor: 0;
  --editor-vertical-padding: 0px;
  --editor-horizontal-padding: 0px;

  &.indent-headings,
  &.zen-mode {
    --space-left: 4rem;
    --margin-left-factor: 1;
    @media only screen and (max-width: 768px) {
      --space-left: 0px;
      --margin-left-factor: 0;
    }
  }

  &.indent-headings .block[data-placeholder]:before {
    left: calc(
      0px + var(--editor-vertical-padding) +
        calc(var(--space-left) * var(--margin-left-factor))
    );
  }

  &[color-scheme="light"] {
    color-scheme: light;
  }

  &[color-scheme="dark"] {
    color-scheme: dark;
  }

  font-family: var(
    --font-family-monospace,
    ui-monospace,
    SFMono-Regular,
    SF Mono,
    Menlo,
    Consolas,
    Liberation Mono,
    monospace
  );
  font-size: var(--font-size, 1rem);

  color: var(--color-text, light-dark(#000, #fff));
  background-color: var(--color-background, light-dark(#fff, #202020));

  &:not(.textarea) .focus-editor[contenteditable="true"] {
    outline: none;
  }
  .focus-editor {
    padding: var(--editor-vertical-padding) var(--editor-horizontal-padding);
    min-height: calc(100% - 2 * var(--editor-vertical-padding));
    &.hide-caret {
      caret-color: transparent;
    }
    .block,
    > br {
      line-height: var(--line-height);
      min-height: var(--line-height);
      padding-left: calc(var(--margin-left-factor) * var(--space-left));
      margin: 0;
    }
    .block:not(.code-block) {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .block:not(.code-block) {
      transition:
        opacity var(--transition-duration),
        color var(--transition-duration),
        background-color 0.05s,
        transform var(--transition-duration);
    }
    /* .block:last-child {
      padding-bottom: 2rem;
    } */

    .code-block {
      background: var(--color-grey-light);
      padding-left: var(--space);
      padding-right: var(--space);
      margin-left: calc(var(--margin-left-factor) * var(--space-left));
      margin-bottom: 0;
      white-space: pre-wrap;
      word-break: break-word;
    }
    code {
      background: var(--color-grey-light);
      padding: 0.1em 0.25em;
      margin-left: -0.25em;
      font-family: var(--font-family-monospace);
      &:after {
        content: "";
        margin-right: -0.25em;
      }
      border-radius: 4px;
    }
    .code-block-start {
      padding-top: calc(0.5 * var(--space));
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
      position: relative;
      &:after {
        content: "";
        position: absolute;
        left: calc(3em - 3px);
        height: var(--line-height);
        width: calc(100% - 2.8rem);
        background: var(--color-grey-light);
        opacity: 0.7;
        pointer-events: none;
      }
    }
    .code-block-end {
      padding-bottom: calc(0.5 * var(--space));
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
    }
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
      font-size: var(--font-size);
      font-weight: bold;
    }

    .h1 {
      transform: translateX(
        calc(var(--margin-left-factor) * -0.3 * var(--space-left))
      );
    }
    .h2 {
      transform: translateX(
        calc(var(--margin-left-factor) * -0.45 * var(--space-left))
      );
    }
    .h3 {
      transform: translateX(
        calc(var(--margin-left-factor) * -0.61 * var(--space-left))
      );
    }
    .h4 {
      transform: translateX(
        calc(var(--margin-left-factor) * -0.77 * var(--space-left))
      );
    }
    .h5 {
      transform: translateX(
        calc(var(--margin-left-factor) * -0.91 * var(--space-left))
      );
    }
    .blockquote {
      margin-bottom: 0;
      --margin-left: 0.75rem;
      transform: translateX(
        calc(var(--margin-left-factor) * var(--space-left) + var(--margin-left))
      );
      margin-right: calc(0.5 * var(--space-left));
      padding-left: 1rem;
      position: relative;
      padding-right: 0.25rem;

      width: calc(
        100% - calc(var(--margin-left-factor) * var(--space-left) + var(--margin-left)) -
          1.25rem
      );

      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0.5rem;
        background: var(--color-grey-lighter);
      }

      code {
        background: var(--color-grey-lighter);
      }
    }
    .blockquote:first-child,
    :not(.blockquote) + .blockquote {
      padding-top: 0.25rem;
    }
    .blockquote:has(+ *:not(.blockquote)),
    .blockquote:last-child {
      padding-bottom: 0.25rem;
    }
    .hr {
      position: relative;
      color: transparent;
      &:focus,
      &.with-caret {
        color: var(--color-grey-lighter);
      }
      &:before {
        content: "";
        display: block;
        height: 3px;
        background: color-mix(in srgb, var(--color-grey) 30%, transparent);
        top: calc(50% - 0.7px);
        position: absolute;
        right: 0;
        width: calc(100% - var(--space-left));
        z-index: 0;
      }
    }
    .link {
      --default-color: currentColor;
      color: currentColor;
      text-decoration: none;
      display: inline;
      transition: color 0.1s;
      span {
        color: var(--color-grey-lighter);
        transition: color 0.1s;
      }

      @media (hover) {
        &:hover {
          text-decoration: underline;
          span {
            color: var(--default-color);
          }
        }
      }
    }
    .with-caret .link {
      text-decoration: underline;
      span {
        color: var(--default-color);
      }
    }
  }
}

focus-editor.textarea {
  outline: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 2px;
  resize: both;
  --editor-vertical-padding: calc(0.5 * var(--space));
  --editor-horizontal-padding: var(--space);
  --rows: 5;
  @supports (x: attr(x type(*))) {
    --rows: attr(rows type(<number>), 5);
  }
  width: clamp(5em, 35em, 100%);
  min-height: calc(
    var(--line-height) * 2 + var(--editor-vertical-padding) +
      var(--editor-vertical-padding)
  );
  height: calc(
    var(--line-height) * var(--rows) + var(--editor-vertical-padding) +
      var(--editor-vertical-padding)
  );

  &:focus-within {
    outline: 2px auto Highlight;
    outline: 2px auto -webkit-focus-ring-color;
  }

  .focus-editor {
    height: calc(100% - 2 * var(--editor-vertical-padding));
    min-height: 3.5em;
    outline: none;
  }
}

focus-editor[focus="paragraph"] {
  .block:not(.with-caret) {
    opacity: 0.15;
  }
  .block:has(+ .block.with-caret) {
    opacity: 0.3;
  }
  .block.with-caret + .block {
    opacity: 0.3;
  }

  .code-block:not(.with-caret) {
    opacity: 0.4;
    color: color-mix(in srgb, currentColor 20%, transparent);
  }
  .code-block:not(.with-caret):has(~ .code-block.with-caret),
  .code-block.with-caret ~ .code-block {
    opacity: inherit;
    color: currentColor;
  }

  .blockquote:not(.with-caret) {
    opacity: 0.4;
    color: color-mix(in srgb, currentColor 20%, transparent);
    &:before {
      background: color-mix(in srgb, currentColor 20%, transparent);
    }
  }
  .blockquote:not(.with-caret):has(~ .blockquote.with-caret),
  .blockquote.with-caret ~ .blockquote {
    opacity: inherit;
    color: currentColor;
    &:before {
      background: var(--color-grey);
    }
  }
}

focus-editor.zen-mode.enalarge-zen {
  @media (min-width: 768px) {
    .focus-editor {
      transform: scale(1.2);
      width: 80%;
      transform-origin: left top;
      height: 50%;
      --editor-vertical-padding: 2rem;
    }
  }
  @media (min-width: 1200px) {
    .focus-editor {
      transform: scale(1.3);
      width: min(70%, 55rem);
      transform-origin: left top;
      --editor-vertical-padding: 2rem;
    }
  }
}

focus-editor[hyphens] {
  .block:not(.code-block) {
    hyphens: auto;
  }
}

focus-editor[scroll] {
  .focus-editor .block:last-child {
    margin-bottom: 50%;
  }
}

focus-editor {
  .block[data-placeholder] {
    position: relative;
    &:before {
      content: attr(data-placeholder);
      position: absolute;
      top: 0;
      left: 0;
      line-height: var(--line-height);
      color: var(--color-grey);
      font-weight: normal;
      font-style: normal;
    }
  }
  .block[data-placeholder] + .block[data-placeholder]:before {
    display: none;
  }
  /* visual fix for safari: sometimes a br is insert before placeholder */
  br:has(~ .block[data-placeholder]) {
    display: none;
  }
}
focus-editor[image-preview] {
  .link.image {
    span {
      /* display: inline-block; */
      &:after {
        --transition-duration: 0.7s;
        content: "";
        width: 1.2rem;
        height: 1.2rem;
        transition:
          height var(--transition-duration),
          width var(--transition-duration),
          transform var(--transition-duration);
        transform: translateY(0.2rem);
        background: var(--url);
        background-size: cover;
        background-position: center;
        position: relative;
        display: inline-block;
      }
    }
  }
  &[enlarge-image-preview] {
    .block.with-caret,
    .block:hover {
      .link.image {
        span {
          &:after {
            width: 8rem;
            height: 8rem;
            aspect-ratio: auto;
            transform: translateY(4rem);
            z-index: 99;
          }
        }
      }
    }
  }
}

focus-editor.highlight-current-paragraph .focus-editor {
  .block {
    opacity: 0.3;
    transition:
      opacity 0.2s,
      color var(--transition-duration),
      transform var(--transition-duration);
  }
  .block.with-caret {
    opacity: 1;
  }
  .code-block:not(.with-caret) {
    background: none;
    &:after {
      display: none;
    }
  }
}