.visMapLegend {
  @include fontSize(11px);
  @include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: 0.1);

  font-family: var(--font-text);
  font-weight: $euiFontWeightMedium;
  line-height: $euiLineHeight;
  color: $euiColorDarkShade;
  padding: $euiSizeS;
  background: transparentize($euiColorEmptyShade, 0.2);
  border-radius: $euiBorderRadius;

  i {
    @include size($euiSizeS + 2px);

    display: inline-block;
    margin: 3px $euiSizeXS 0 0;
    border-radius: 50%;
    border: 1px solid $euiColorDarkShade;
    background: $euiColorDarkShade;
  }
}

.visMapLegend__title {
  font-weight: $euiFontWeightBold;
}

// Wrapper/Position

// top left needs some more styles
.leaflet-top.leaflet-left .visMapLegend__wrapper {
  position: absolute;
  left: $euiSizeXXL;
  white-space: nowrap;
}

.mapButton {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome, sans-serif;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}