// =============================================================================
// Editor Wrapper Styles
// =============================================================================

.dm-editor {
  display: block;
  position: relative;
  box-sizing: border-box;
  background: var(--dm-editor-bg);
  color: var(--dm-editor-text);
  font-family: var(--dm-editor-font-family);
  font-size: var(--dm-editor-font-size);
  line-height: var(--dm-editor-line-height);
  border: var(--dm-editor-border);
  border-radius: var(--dm-editor-border-radius);
  box-shadow: var(--dm-editor-shadow, none);
  color-scheme: var(--dm-color-scheme, light);

  // Content clips at the rounded corners on the view's mount wrapper rather
  // than on `.dm-editor` itself: floating UI (suggestion popups, menus) is
  // positioned inside `.dm-editor` and must be able to escape editors that
  // are shorter than the popup (e.g. one-line comment composers).
  > div:has(> .ProseMirror) {
    overflow: hidden;
    border-radius: inherit;
  }

  .ProseMirror {
    padding: var(--dm-editor-padding);
    // `--dm-editor-padding-top` exists because this calc() needs a single
    // length: a two-value `--dm-editor-padding` shorthand would make the
    // whole expression invalid and collapse padding-top to 0.
    padding-top: calc(var(--dm-editor-padding-top, var(--dm-editor-padding)) + var(--dm-editor-padding-top-extra, 0px));
    min-height: 6rem;

    &:focus-visible {
      outline: none;
    }
  }

  // Focus ring on wrapper when editor is focused
  &:focus-within {
    box-shadow: var(--dm-editor-focus-ring, var(--dm-editor-shadow, none));
  }

  // Text selection colors
  .ProseMirror ::selection {
    background: var(--dm-selection);
  }
}

// When toolbar is present above editor, remove top border-radius from editor
.dm-toolbar + .dm-editor {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

// =============================================================================
// Shared floating element fade-in animation
// =============================================================================
// Used by elements conditionally inserted into the DOM (emoji picker,
// suggestion dropdown, toolbar dropdowns). Uses scale instead of translateY:
// scale doesn't shift position so it won't conflict with floating-ui.
// Elements using data-show (bubble menu, floating menu, popovers) use CSS
// opacity transitions instead - see their respective stylesheets.
// =============================================================================

@keyframes dm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}