:root {
  --markdown-editor-max-height: calc(100vh - theme("height.10"));
  --markdown-editor-max-width: calc(100vw - theme("width.10"));
}

.ads-MarkdownEditorOverlay {
  @apply top-0
    left-0
    z-modal
    flex
    items-center
    justify-center
    w-screen
    h-screen;
}

.ads-MarkdownEditorOverlay-popover {
  @apply flex-row
    bg-white
    shadow-popover
    w-full
    h-full
    rounded
    relative;

  max-height: var(--markdown-editor-max-height);
  max-width: var(--markdown-editor-max-width);
}

.ads-MarkdownEditorOverlay-controls {
  @apply h-15
    border-gray-400
    px-8;
}

.ads-MarkdownEditorOverlay-preview {
  @apply overflow-y-auto
    py-12
    pl-10
    pr-16;

  height: calc(
    var(--markdown-editor-max-height) - theme("height.15") - theme("height.15")
  );
}

.ads-MarkdownEditorOverlay-loading {
  @apply items-center
    justify-center
    w-full
    h-full
    absolute
    top-0
    left-0
    z-overlay
    rounded;

  background-color: rgba(255, 255, 255, 0.7);
}

.ads-MarkdownHelp {
  @apply flex
    items-center
    justify-center
    top-0
    left-0
    z-toast
    w-screen
    h-screen;
}

.ads-MarkdownHelp-panel {
  @apply bg-gray-900
    rounded
    z-default
    w-full
    max-w-lg;

  max-height: 80vh;
}

.ads-MarkdownHelp-header {
  @apply h-10
    w-full;
}

.ads-MarkdownHelp-closeButton {
  @apply absolute
    top-0
    right-0
    m-2;
}

.ads-MarkdownHelp-scrollBox {
  @apply overflow-y-auto
    p-8
    w-full;

  height: calc(80vh - theme("height.10"));
}

.ads-MarkdownHelp-cover {
  @apply top-0
    left-0
    w-full
    h-full;
}

.ads-MarkdownHelp-preformattedText {
  @apply text-gray-400
    bg-gray-800
    rounded
    text-bodySm
    leading-normal
    p-4
    my-4;
}

/**
 * CodeMirror overrides
 * These styles are scoped to ads-MarkdownEditorOverlay as to prevent
 * specificity issues and they override the default CodeMirror styles which are
 * imported in src/plugin.css.
 */

.ads-MarkdownEditorOverlay .CodeMirror {
  @apply bg-gray-700
    text-gray-200
    font-mono
    leading-normal
    text-body
    w-full
    rounded-tl
    rounded-bl;

  height: var(--markdown-editor-max-height);
}

.ads-MarkdownEditorOverlay .CodeMirror-lines {
  @apply py-20;
}

.ads-MarkdownEditorOverlay .CodeMirror pre.CodeMirror-line,
.ads-MarkdownEditorOverlay .CodeMirror pre.CodeMirror-line-like {
  @apply px-10;
}

.ads-MarkdownEditorOverlay .CodeMirror-scrollbar-filler,
.ads-MarkdownEditorOverlay .CodeMirror-gutter-filler {
  @apply bg-transparent;
}

.ads-MarkdownEditorOverlay .CodeMirror-gutters {
  @apply border-0;

  background-color: #3d5e73; /* gray-800 25% */ /* TODO */
}

.ads-MarkdownEditorOverlay .CodeMirror-linenumber {
  @apply text-gray-600
    min-w-10
    px-1;
}

.ads-MarkdownEditorOverlay .CodeMirror-guttermarker,
.ads-MarkdownEditorOverlay .CodeMirror-guttermarker-subtle {
  @apply text-gray-600;
}

.ads-MarkdownEditorOverlay .CodeMirror-cursor {
  @apply border-gray-400
    border-l-2;
}