docmost/apps/client/src/features/editor/components/transclusion/transclusion.module.css

.placeholder {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--mantine-radius-md);
  background: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-6)
  );
  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
  font-size: var(--mantine-font-size-sm);
  user-select: none;
}

.placeholderIcon {
  flex: none;
  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
}

.transclusionBadge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--mantine-font-size-xs);
  font-weight: 600;
  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
  background: light-dark(
    var(--mantine-color-gray-1),
    var(--mantine-color-dark-5)
  );
  border-radius: var(--mantine-radius-sm);
  margin-bottom: 4px;
}

.transclusionWrap {
  position: relative;
  margin-left: -3rem;
  margin-right: -3rem;
  width: calc(100% + 6rem);
  padding: 0.5em 3rem;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border 0.3s;
}

.transclusionWrap[data-editable="false"],
.includeWrap[data-editable="false"] {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  padding: 0;
}

/* Cancel the wrapping .react-renderer's vertical spacing in read-only mode
   so the synced block sits flush with surrounding paragraphs (whose own
   margins already provide the right rhythm). */
:global(.react-renderer.node-transclusionSource):has(
    .transclusionWrap[data-editable="false"]
  ),
:global(.react-renderer.node-transclusionReference):has(
    .includeWrap[data-editable="false"]
  ) {
  margin-top: 0;
  margin-bottom: 0;
}

.transclusionWrap[data-editable="true"]:hover,
.transclusionWrap[data-editable="true"]:focus-within {
  border: 2px solid
    light-dark(
      var(--mantine-color-orange-2),
      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
    );
}

.transclusionControls {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--mantine-color-body);
  border: 1px solid var(--mantine-color-default-border);
  border-radius: 6px;
  padding: 4px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}

/* Hover bridge: keeps :hover on the wrap while the cursor crosses the
   8px gap between wrap and floating chrome, so the menu doesn't fade out
   on the way to it. */
.transclusionControls::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.transclusionWrap:hover .transclusionControls,
.transclusionWrap:focus-within .transclusionControls,
.transclusionWrap[data-menu-open="true"] .transclusionControls {
  opacity: 1;
  pointer-events: auto;
}

.controlsDivider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--mantine-color-default-border);
}

.transclusionControls a[href],
.includeControls a[href] {
  color: var(--ai-color);
  border-bottom: none;
  font-weight: inherit;
}

.includeWrap {
  position: relative;
  margin-left: -3rem;
  margin-right: -3rem;
  width: calc(100% + 6rem);
  padding: 0.5em 0;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border 0.3s;
}

.includeWrap[data-editable="true"]:hover,
.includeWrap[data-editable="true"][data-focused="true"],
.includeWrap[data-editable="true"][data-menu-open="true"] {
  border: 2px solid
    light-dark(
      var(--mantine-color-orange-2),
      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
    );
}

.includeControls {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--mantine-color-body);
  border: 1px solid var(--mantine-color-default-border);
  border-radius: 6px;
  padding: 4px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}

/* Hover bridge: keeps :hover on the wrap while the cursor crosses the
   8px gap between wrap and floating chrome, so the menu doesn't fade out
   on the way to it. */
.includeControls::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.includeWrap:hover .includeControls,
.includeWrap:focus-within .includeControls,
.includeWrap[data-focused="true"] .includeControls,
.includeWrap[data-menu-open="true"] .includeControls {
  opacity: 1;
  pointer-events: auto;
}

:global(.react-renderer.node-transclusionSource.ProseMirror-selectednode),
:global(.react-renderer.node-transclusionReference.ProseMirror-selectednode) {
  outline: none;
}

@media (max-width: 48em) {
  .transclusionWrap,
  .includeWrap {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
  }

  .transclusionWrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media print {
  .transclusionControls,
  .includeControls {
    display: none !important;
  }
  .transclusionWrap,
  .includeWrap {
    border: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

.editingOriginalTag {
  display: inline-block;
  padding: 0 6px;
  font-size: var(--mantine-font-size-xs);
  font-weight: 500;
  color: var(--mantine-color-blue-7);
  background: light-dark(
    var(--mantine-color-blue-0),
    var(--mantine-color-blue-9)
  );
  border-radius: var(--mantine-radius-sm);
}