@import 'part:@sanity/base/theme/variables-style';

:root {
  --border-style: 1px solid rgba(0, 0, 0, 0.1);
}

.root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hoverNode {
  display: none;
  position: absolute;
  bottom: var(--large-padding);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background: var(--component-bg);
  border-radius: var(--border-radius-medium);
  padding: var(--small-padding);
  z-index: 1000;

  @nest &:empty {
    display: none;
  }
}

.legend {
  color: var(--gray);
  position: absolute;
  top: var(--medium-padding);
  left: var(--medium-padding);

  > div {
    margin: 5px 0;
  }
}

.legend__row {
  display: flex;

  @nest .legend__row + & {
    margin-top: 0.25em;
  }
}

.legend__badge {
  width: 1.25em;
  height: 1.25em;
  background: currentColor;
  border-radius: 50%;
  margin-right: var(--extra-small-padding);
}