@mixin cx-legend(
   $name: 'legend',
   $besm: $cx-besm
) {
   $block: map-get($besm, block);
   $element: map-get($besm, element);
   $state: map-get($besm, state);

   .#{$block}#{$name} {
      text-align: center;
   }

   .#{$element}#{$name}-entry {
      display: inline-block;
      padding: 5px 5px 5px 30px;
      font-size: smaller;
      position: relative;
      margin: 5px;
      box-sizing: border-box;
      cursor: pointer;

      .#{$block}#{$name}.#{$state}vertical & {
         display: block;
         text-align: left;
      }
   }

   .#{$element}#{$name}-svg {
      position: absolute;
      left: 5px;
      top: 50%;
   }

   .#{$element}#{$name}-shape {
      fill: rgba(128, 128, 128, 0.1);
   }
}

@if (cx-should-include('cx/charts/Legend')) {
   @include cx-legend();
}