:root {
  --dot-size: 1.3em;
  --dot-bg: red;
  --legend-font-size: var(--font-size--xs);
  --legend-text-color: #fff;
}
.legend {
  margin-bottom: 0px;
  display: flex;
  & > * + * {
    padding-left: 1.5em;
  }
  li {
    font-size: var(--font-size--xs);
    color: #ffffff;
    list-style-type: none;
    line-height: var(--font-size--xl);
  }
  .li-divider {
    border: none;
    margin-left: 0;
    flex-basis: 100%;
    padding-left: 0px;
    @include for-desktop {
      border-left: 1px solid #fff;
      margin-left: 2em;
      padding-left: 1.5em;
      flex-basis: inherit;
    }
  }
}
.legend--funnel {
  padding: 0;
  justify-content: space-between;
  margin-bottom: 0;
}
.legend__group {
  display: block;
}
.legend__header {
  font-size: var(--font-size--sm);
  color: var(--color-text);
}
.legend__item {
  font-size: var(--legend-font-size);
  display: flex;
  align-items: center;
  color: var(--legend-text-color);
  &:before {
    content: "";
    background: var(--dot-bg);
    display: block;
    margin-right: var(--spacer-xs);
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 9999px;
  }
}
.legend__item--lg {
  --dot-size: .8em;
  font-size: var(--font-size--xxl);
  margin: 0;
  align-items: flex-start;
}
.legend__item--yellow {
  --dot-bg: var(--db-yellow-gradient);
}
.legend__item--red {
  --dot-bg: var(--db-red-gradient);
}
.legend__item--green {
  --dot-bg: var(--db-green-gradient);
}
.legend__item--brightgreen {
  --dot-bg: var(--db-brightgreen-gradient);
}
.legend__item--blue {
  --dot-bg: var(--db-blue-gradient);
}
.legend__item--brown {
  --dot-bg: var(--db-brown-gradient);
}