@use "../../../Sass/common/_variables";

.legend {
  composes: clearfix from "../../../Sass/common/_base.scss";
  composes: list-reset from "../../../Sass/common/_base.scss";
  font-family: variables.$font-mono;
  // Small font size prevents the font from dictating the table row height.
  font-size: 5px;

  li {
    display: block;
  }

  .legendOpenExternally {
    font-size: variables.$font-size-small;
    color: variables.$text-light;
  }

  .legendTitle {
    font-size: variables.$font-size-small;
    margin: 0px;
  }
}

.legend__inner {
  padding: 0;

  a {
    // Only the actual legend should be clickable rather than the whole area
    display: inline-block;
  }
}

.legend__legendBoxImg {
  display: inline-block;
  background: #fff;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

.legend--svg {
  text {
    fill: #fff;
  }

  :global .tick-mark {
    stroke: #fff;
  }

  svg {
    width: 100%;
    display: block;

    :global rect.background {
      width: 100%;
      fill: rgba(#fff, 0.15);
    }
  }
}

.loader {
  font-family: variables.$font-base;

  svg {
    fill: #fff;
  }
}

.imageAnchor {
  max-width: 100%;
}

.generatedLegend {
  padding-top: variables.$legend-padding;
  padding-bottom: variables.$legend-padding;
}

.generatedLegend table {
  border-collapse: collapse;
  border-spacing: 0;
}

.legendTitles {
  font-size: 14px;
  line-height: variables.$legend-item-height;
  padding-left: 5px;
}

.legendTitleAbove {
  position: absolute;
  margin-top: -(variables.$legend-item-height);
}

.legendTitleAbove::before {
  content: "-";
  padding-left: -5px;
}

.legendTitleBelow {
  position: absolute;
  margin-top: 0px;
}

.legendTitleBelow::before {
  content: "-";
}

.legendSpacer {
  height: variables.$legend-spacer-height;
}