@import 'splitpanes/dist/splitpanes.css';
@import 'floating-vue/dist/style.css';

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: #121212;
  color-scheme: dark;
}

.CodeMirror {
  height: inherit !important;
  font-family: var(--cm-font-family) !important;
  font-size: 13px !important;
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background-color: var(--cm-background) !important;
}

.CodeMirror-dialog {
  @apply !border-main !py-1;
}

#CodeMirror-search-field {
  @apply !border-main !border !rounded !outline-none !border-solid !px-1.5 !py-0.25;
}

/* Splitpanes */
.splitpanes__pane {
  transition: none !important;
}

.splitpanes__pane[style*="display: none"]+.splitpanes__splitter,
.splitpanes__pane[hidden]+.splitpanes__splitter {
  display: none;
}

.splitpanes__splitter {
  position: relative;
  @apply bg-gray:30
}

.splitpanes__splitter:before {
  position: absolute;
  left: 0;
  top: 0;
  transition: .2s ease;
  content: '';
  transition: opacity 0.4s;
  z-index: 1;
}

.splitpanes__splitter:hover:before {
  background: #8881;
  opacity: 1;
}

.splitpanes--vertical>.splitpanes__splitter {
  width: 1px !important;
}

.splitpanes--horizontal>.splitpanes__splitter {
  height: 1px !important;
}

.splitpanes--vertical>.splitpanes__splitter:before {
  left: -5px;
  right: -5px;
  height: 100%;
}

.splitpanes--horizontal>.splitpanes__splitter:before {
  top: -5px;
  bottom: -5px;
  width: 100%;
}

/* Overrides Floating Vue */
.v-popper--theme-dropdown .v-popper__inner,
.v-popper--theme-tooltip .v-popper__inner {
  --at-apply: bg-main text-main font-sans rounded border border-main shadow dark-shadow-2xl;
  box-shadow: 0 6px 30px #0000001a;
}

.v-popper--theme-tooltip .v-popper__arrow-inner,
.v-popper--theme-dropdown .v-popper__arrow-inner {
  visibility: visible;
  --at-apply: border-white dark-border-neutral-900;
}

.v-popper--theme-tooltip .v-popper__arrow-outer,
.v-popper--theme-dropdown .v-popper__arrow-outer {
  --at-apply: border-main;
}

.v-popper--theme-tooltip.v-popper--shown,
.v-popper--theme-tooltip.v-popper--shown * {
  transition: none !important;
}