/* Spectra Viewer HTML tag suggestion popup. */

body.sp-app-shell.sv-viewer{
  --sv-html-suggest-bg:color-mix(in srgb,var(--sp-elev),var(--sp-bg) 14%);
  --sv-html-suggest-border:color-mix(in srgb,var(--sp-border),var(--sv-syntax-tag) 24%);
  --sv-html-suggest-shadow:var(--sp-shadow-3);
  --sv-html-suggest-active-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-syntax-tag) 16%);
  --sv-html-suggest-active-border:color-mix(in srgb,var(--sp-border-strong),var(--sv-syntax-tag) 34%);
  --sv-html-suggest-muted:var(--sp-muted);
  --sv-html-suggest-max-w:min(30rem,calc(100vw - var(--sp-6)));
}

body.sp-app-shell.sv-viewer .sv-editorSyntaxSurface{
  isolation:isolate;
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest{
  position:absolute;
  z-index:8;
  width:min(28rem,calc(100% - var(--sp-4)));
  max-width:var(--sv-html-suggest-max-w);
  overflow:hidden;
  border:var(--sp-border-w-1) solid var(--sv-html-suggest-border);
  border-radius:var(--sp-radius-2);
  background:var(--sv-html-suggest-bg);
  box-shadow:var(--sv-html-suggest-shadow);
  color:var(--sp-text);
  font-family:var(--sv-editor-font-family);
  font-size:var(--sp-fs-2);
  line-height:1.35;
  backdrop-filter:blur(10px);
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest[hidden]{
  display:none!important;
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  border-bottom:var(--sp-border-w-1) solid color-mix(in srgb,var(--sv-html-suggest-border),transparent 30%);
  background:color-mix(in srgb,var(--sp-surface-2),transparent 18%);
  color:var(--sv-syntax-tag);
  font-weight:var(--sp-fw-semibold);
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__hint{
  color:var(--sv-html-suggest-muted);
  font-size:var(--sp-fs-1);
  font-weight:400;
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__list{
  max-height:18rem;
  overflow:auto;
  scrollbar-width:thin;
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__option{
  display:grid;
  grid-template-columns:minmax(5rem,.7fr) minmax(9rem,1.4fr) auto;
  align-items:center;
  gap:var(--sp-3);
  min-height:2.25rem;
  padding:var(--sp-2) var(--sp-3);
  border-left:calc(var(--sp-border-w-1) * 2) solid transparent;
  cursor:pointer;
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__option + .sv-editorHtmlSuggest__option{
  border-top:var(--sp-border-w-1) solid color-mix(in srgb,var(--sp-border),transparent 44%);
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__option:hover,
body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__option[aria-selected="true"]{
  border-left-color:var(--sv-html-suggest-active-border);
  background:var(--sv-html-suggest-active-bg);
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__tag{
  color:var(--sv-syntax-tag);
  font-weight:600;
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__preview{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--sv-syntax-string);
}

body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__kind{
  color:var(--sv-html-suggest-muted);
  font-size:var(--sp-fs-1);
  text-transform:uppercase;
  letter-spacing:.04em;
}

body.sp-app-shell.sv-viewer .sv-editorHtmlCaretMirror{
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
}

body.sp-app-shell.sv-viewer .sv-editorSyntaxSurface.is-wrapped .sv-editorHtmlCaretMirror{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

@media (max-width:52rem){
  body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest{
    width:calc(100% - var(--sp-3));
  }

  body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__option{
    grid-template-columns:minmax(4.5rem,.7fr) minmax(0,1fr);
  }

  body.sp-app-shell.sv-viewer .sv-editorHtmlSuggest__kind{
    display:none;
  }
}