@use "editor.scss";
@use "terminal.scss";
@use "loading.scss";
@use "controls.scss";
@use "themes.scss";

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  color: var(--fg-0);
  font-family: var(--font-ui);
  font-size: 14px;
  background: #909090;
}

.app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--bg-0);
  display: flex;
}

.graph {
  width: 100%;
  height: 100%;
  background: var(--graph-bg);
}

.vscroll {
  height: 100%;
  overflow-y: scroll;
}

.flexCol{
  display: flex;
  flex-direction: column;
}

.flexRow{
  display: flex;
  flex-direction: row;
}

.flexCenter{
  display: flex;
  justify-content: center;
}

.gap {
  gap: 1em
}

.marginTop {
  margin-top: 1em;
}

.sidePadding {
  padding: 0px 1em;
}

.hSplit {
    :not( .styleOnly){
        cursor: col-resize;
    }
    height: 8px;
    min-height: 8px;
    max-height: 8px;
    background: var(--separator-bg);
    transition:
        background var(--dur-med) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard);
}

.vSplit {
    :not( .styleOnly){
        cursor: col-resize;
    }
    width: 8px;
    min-width: 8px;
    max-width: 8px;
    background: var(--separator-bg);
    transition:
        background var(--dur-med) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard);
}

.hSplit:hover:not(.styleOnly),
.vSplit:hover:not(.styleOnly) {
  background: var(--separator-hover);
}


.ex-label {
  display: block;
  margin-bottom: 6px;
}

.ex-select {
  width: 320px;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(bg-1);
  background: var(--bg-2);
  font: var(--font-ui)
}

.share-toast {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);

  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--fg-0);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;

  opacity: 0;
}

.share-toast.show {
  animation: toastFade 1.4s ease forwards;
}

@keyframes toastFade {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}