.dv-legend {
  display: flex;
  align-items: center;

  &-item {
  }

  &-color {
    height: $space-half;
  }

  &-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: $component-size;
    padding: 0 $content-padding;
    font-size: $font-size;
    color: $dv-dark-secondary-text-color;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background: rgba(51, 51, 51, 0.5);
    transition: $transition-time;

    &:hover {
      background: rgba(51, 51, 51, 0.7);
    }

    &.active {
      background: rgba(51, 51, 51, 0.8);
    }
  }
}