@use 'src/styles/abstracts' as *;

.Report {
  height: 100vh;
  &__appBar {
    width: 100%;
    display: flex;
    flex: 0;
    white-space: nowrap;
    padding-right: $space-xs;
  }
  &__title {
    margin: 0.5em 0;
    padding: 0;
    color: $primary-color;
  }
}
.Report__appBar__controls {
  display: flex;
  > * {
    margin-left: $space-xxs;
  }
}

.ReportVisualizer {
  width: 100%;
  height: calc(100vh - 28px);
  max-width: 100%;
  overflow: hidden;
}

.ReportVisualizer__main {
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
}

.ReportVisualizer__main__editor {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .monaco-editor-background,
  .monaco-editor .margin {
    background-color: #fff;
  }
}

.ReportVisualizer__main__editor__code {
  flex: 0.8;
}

.ReportVisualizer__main__components {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;

  &--fullWidth {
    width: 100%;
  }
}

.ReportVisualizer__main__components--loading {
  align-items: center;
  justify-content: center;
}

.ReportVisualizer__main__components--processing {
  & > *:not(.ReportVisualizer__main__components__spinner) {
    filter: blur(5px);
  }
}

.ReportVisualizer__main__components__spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ReportVisualizer__main__components__viz {
  position: relative;
  width: 100%;
  max-width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: $space-sm;
  padding: $space-lg;

  .Board {
    height: 100%;
  }

  > * {
  }
}

.ReportVisualizer__main__components__viz__error {
  @include monospaceFontFamily();
  padding: $space-xs $space-sm;
  color: $error-color;
}
