.vgaVis {
  display: flex;
  flex: 1 1 100%;
  position: relative;
  // flex-direction determined by js
}

.vgaVis__view {
  z-index: 0;
  flex: 1 1 100%;

  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;

  // BUG #23514: Make sure Vega doesn't display the controls in two places
  .vega-bindings {
    display: none !important;
  }
}

.vgaVis__controls {
  @include euiFontSizeS;
  display: flex;

  &:not(:empty) {
    padding: $euiSizeS 0; // Adding a little bit of padding helps with the unnecessary scrollbars
  }

  &.vgaVis__controls--column {
    flex-direction: column;
  }

  &.vgaVis__controls--row {
    flex-direction: row;

    > .vega-bind {
      flex-grow: 1;
    }
  }

  > .vega-bind {
    .vega-bind-name {
      display: inline-block;
      width: $euiSizeM * 10 - $euiSize;
    }

    input[type="range"] {
      width: $euiSizeM * 10;
      display: inline-block;
      vertical-align: middle;
    }

    label {
      margin: 0 0 0 $euiSizeS;
    }

    select {
      max-width: $euiSize * 10;
    }

    .vega-bind-radio label {
      margin: 0 $euiSizeS 0 $euiSizeXS;
    }
  }
}

// Messages

.vgaVis__messages {
  position: absolute;
  top: 0;
  width: 100%;
  margin: auto;
  opacity: 0.8;
  z-index: 1;
  list-style: none;
}

.vgaVis__message {
  margin: $euiSizeS;

  .vgaVis__messageCode {
    white-space: pre-wrap;
    padding: $euiSizeS;
  }
}

.vgaVis__message--warn .vgaVis__messageCode {
  $calculatedBackgroundColor: tintOrShade($euiColorWarning, 90%, 70%);
  background-color: $calculatedBackgroundColor;
  color: makeHighContrastColor($euiColorWarning, $calculatedBackgroundColor);
}

.vgaVis__message--err .vgaVis__messageCode {
  $calculateBackgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
  background-color: $calculateBackgroundColor;
  color: makeHighContrastColor($euiColorDanger, $calculateBackgroundColor);
}


// Style tooltip popup (gets created dynamically at the top level if dashboard has a Vega vis)
// Adapted from https://github.com/vega/vega-tooltip

.vgaVis__tooltip {
  h2 {
    margin-bottom: $euiSizeS;
  }

  td {
    @include euiTextTruncate;
    padding-top: $euiSizeXS;
    padding-bottom: $euiSizeXS;
  }

  td.key {
    color: $euiColorMediumShade;
    max-width: $euiSize * 10;
    text-align: right;
    padding-right: $euiSizeXS;
  }
  td.value {
    max-width: $euiSizeL * 10;
    text-align: left;
  }
}
