@use "sass:math";
@use "sass:map";
@use "../util/scss/besm.scss" as *;
@use "../util/scss/include.scss" as *;
@use "../util/scss/add-rules.scss" as *;
@use "../util/scss/clockwise.scss" as *;
@use "./variables" as *;

@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} {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: $cx-default-chart-legend-gap;
   }

   .#{$block}#{$name}.#{$state}vertical {
      flex-direction: column;
   }

   .#{$element}#{$name}-entry {
      display: flex;
      align-items: center;
      padding: $cx-default-chart-legend-padding;
      gap: $cx-default-chart-legend-entry-gap;
      font-size: $cx-default-chart-legend-font-size;
      position: relative;
      box-sizing: border-box;
      cursor: pointer;
   }

   .#{$element}#{$name}-svg {
      flex-shrink: 0;
   }

   .#{$element}#{$name}-shape {
      fill: $cx-default-chart-legend-shape-color;
      stroke-width: $cx-default-chart-legend-shape-stroke-width;
   }

   .#{$element}#{$name}-value {
      order: 3;
   }

   .#{$element}#{$name}-entry-text {
      order: 2;
   }
}

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