iterative/vscode-dvc

@import '../../shared/variables';
@import '../../shared/styles';

$gap: 20px;

.plots {
  width: 100%;
  height: 100%;
}

.plotsWrapper {
  width: 100%;
}

.singleViewPlotsGrid,
.multiViewPlotsGrid {
  width: 100%;
  height: max-content;

  + .singleViewPlotsGrid,
  + .multiViewPlotsGrid {
    margin-top: $gap;
  }
}

.plot {
  overflow: visible;
  position: relative;
  background: $fg-transparency-1;
  border: none;
  padding-top: 5px;

  &:hover {
    z-index: 2;
  }
}

.dragAndDropPlot {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grabbing;
}

.dragAndDropPlotContent {
  padding: 20px;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.dragAndDropPlotTitle {
  text-align: center;
}

.dragAndDropPlotSubtitle {
  text-align: center;
  font-size: small;
  margin-top: 0;
}

.plotGripIcon {
  position: absolute;
  z-index: 2;
  fill: $fg-color;
  left: 0;
  top: 0;
  padding: 5px;
  width: 100%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  opacity: 0;
  cursor: grab;

  path {
    transform: rotate(90deg);
    transform-origin: center;
  }

  .plot:hover & {
    opacity: 0.5;
  }
}

.plotGrabbed {
  cursor: grabbing;
}

.plotActions {
  z-index: 2;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: $fg-color;
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity ease-in-out 0.2s;

  svg {
    fill: var(--vscode-editor-background);
    width: 18px;
    height: 18px;
  }

  &:hover {
    opacity: 1;
  }
}

.ratioSmaller .plot {
  aspect-ratio: 2 / 1;
}

.ratioSmall .plot {
  aspect-ratio: 9 / 5;
}

.ratioRegular .plot {
  aspect-ratio: 4 / 3;
}

.ratioSquare .plot {
  aspect-ratio: 1;
}

.ratioVerticalNormal .plot {
  aspect-ratio: 3 / 4;
}

.ratioVerticalLarger .plot {
  aspect-ratio: 3 / 5;
}

.plot img,
.plot svg {
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}

.plot.multiViewPlot {
  aspect-ratio: calc(0.8 * var(--scale) + 0.2);
  grid-column: span var(--scale);
}

.comparisonTable {
  table-layout: fixed;
  width: calc((10 - var(--variant)) * 50px * var(--scale));
  position: relative;
  padding: 0 20px;
  padding-right: $gap;
}

.dropSectionWrapper {
  margin-top: -30px;
  position: relative;
  z-index: 5;

  &:first-child {
    margin-top: 0;

    &:empty {
      margin-bottom: -30px;
    }
  }
}

.dropSection {
  height: 10px;
}

.dropSectionMaximized,
.dropTarget {
  height: auto;
  opacity: 0.5;
  border: 3px dashed $accent-color;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rowDropTarget {
  width: 100%;
  padding: 20px;
}

.dropIcon {
  border-radius: 100%;
  border: 3px solid $accent-color;
  padding: 20px;
}

.onPlotDropIcon {
  padding: 20px;
  opacity: 0.3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.onPlotDropIcon,
.dropIcon {
  box-sizing: content-box;

  path {
    fill: $accent-color;
  }
}

.zoomablePlot {
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
}

.zoomedInPlot {
  width: 80vw;
  height: calc(80vh - 100px);

  svg {
    background-color: transparent !important;
    width: 100%;
    height: 100%;
  }
}

.errorsModal {
  width: 80vw;
  max-height: calc(80vh - 100px);
  color: $error-color;
}

.errorsModalTitle {
  margin: 0;
}

.errorsModalIcon {
  margin-right: 3px;
  vertical-align: text-bottom;
  fill: $error-color;
}

.errorsModalPlot {
  text-align: left;
  padding: 15px 0 0;
  font-weight: 600;
}

.errorsModalRev {
  padding: 10px 20px 0 0;
}

.errorsModalMsgs {
  width: 100%;
  padding-top: 10px;
}

.vegaCustomAction:hover {
  cursor: pointer;
}

.sizeSliders {
  gap: 10px;
  right: 0;
  top: 0;
  display: flex;
  justify-content: end;
  background-color: $bg-color;
  z-index: 3;
  justify-self: flex-end;
}

.sizeSlider {
  display: flex;
}

.plotTooltip {
  word-break: break-all;
}

.plotTooltipLine {
  margin-bottom: 10px;
  display: flex;

  &:last-child {
    margin: 0;
  }
}

.plotTooltipLabel {
  font-weight: bold;
  min-width: 50px;
  color: $accent-color;
}

/* stylelint-disable selector-class-pattern -- 3rd party selectors */

:global(.vega-bindings):not(:empty) {
  position: absolute;
  bottom: 0;
  width: 100%;
  box-shadow: inset 250px 250px $fg-transparency-1;
  background-color: $bg-color;
  color: $fg-color;
  padding: 10px;
  display: block;
  opacity: 0;

  label {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  input {
    accent-color: $accent-color;
    outline: none;
  }
}

:global(.vega-embed) {
  width: 100%;
  height: 100%;
  align-self: center;
  display: flex !important;
  align-items: center;
  justify-content: center;

  &:hover {
    :global(.vega-bindings) {
      opacity: 1;
    }
  }

  svg {
    overflow: visible;
  }
}

:global(.vg-tooltip) {
  font-size: 10px !important;

  table {
    table-layout: auto !important;

    td {
      max-width: fit-content !important;
    }
  }
}

.zoomedInPlot :global(.chart-wrapper) {
  width: 100%;
  height: 100%;
}

.plotsContent {
  position: relative;
}

.pathHighlight {
  background-color: $fg-transparency-3;
}

:global(.ReactVirtualized__Grid__innerScrollContainer),
.noBigGrid {
  width: calc(100% - $gap * 2) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin-left: $gap;
  display: grid;
  gap: $gap;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--nb-per-row), 1fr);

  + .singleViewPlotsGrid,
  + .multiViewPlotsGrid {
    margin-top: $gap;
  }

  // When editing the grid-template-column for any viewport or plot size, `getNbItemsPerRow` in the `./utils.ts` file should also be updated
  .smallPlots & {
    :global(.role-axis-title) text {
      font-size: 10px;
    }
  }
}

:global(.has-actions) {
  summary {
    background: $fg-color !important;
  }
}

:global(.vega-actions) {
  background: $fg-color !important;

  &::before,
  &::after {
    border-bottom-color: $fg-color !important;
  }

  a:hover {
    background-color: $bg-transparency-1 !important;
  }
}

/* stylelint-enable selector-class-pattern */