// These variables are deprecated and should not be used.
// Please see the updated colors in 5_data-colors.scss

$dataviz-1: $orange;
$dataviz-2: $blue;
$dataviz-3: $sky-blue;
$dataviz-4: $pink;
$dataviz-5: $purple;
$dataviz-6: $indigo;
$dataviz-7: $red;
$dataviz-8: $yellow;
$dataviz-9: $green;
$dataviz-10: $teal;
$dataviz-11: $cyan;

:root {
    --dataviz-1: #{$dataviz-1};
    --dataviz-2: #{$dataviz-2};
    --dataviz-3: #{$dataviz-3};
    --dataviz-4: #{$dataviz-4};
    --dataviz-5: #{$dataviz-5};
    --dataviz-6: #{$dataviz-6};
    --dataviz-7: #{$dataviz-7};
    --dataviz-8: #{$dataviz-8};
    --dataviz-9: #{$dataviz-9};
    --dataviz-10: #{$dataviz-10};
    --dataviz-11: #{$dataviz-11};
}

$dataviz-var-colors: (
    'dataviz-1': $dataviz-1,
    'dataviz-2': $dataviz-2,
    'dataviz-3': $dataviz-3,
    'dataviz-4': $dataviz-4,
    'dataviz-5': $dataviz-5,
    'dataviz-6': $dataviz-6,
    'dataviz-7': $dataviz-7,
    'dataviz-8': $dataviz-8,
    'dataviz-9': $dataviz-9,
    'dataviz-10': $dataviz-10,
    'dataviz-11': $dataviz-11,
);
$dataviz-colors: (
    'bg-dataviz-1': var(--dataviz-1),
    'bg-dataviz-2': var(--dataviz-2),
    'bg-dataviz-3': var(--dataviz-3),
    'bg-dataviz-4': var(--dataviz-4),
    'bg-dataviz-5': var(--dataviz-5),
    'bg-dataviz-6': var(--dataviz-6),
    'bg-dataviz-7': var(--dataviz-7),
    'bg-dataviz-8': var(--dataviz-8),
    'bg-dataviz-9': var(--dataviz-9),
    'bg-dataviz-10': var(--dataviz-10),
    'bg-dataviz-11': var(--dataviz-11),
);

@for $index from 1 through 11 {
    $bg-data-viz-color: var(--dataviz-#{$index});
    $bg-index: $index;
    $color-opacity-40: mix-alpha-color(
        rgba(map-get($dataviz-var-colors, 'dataviz-#{$index}'), 0.4),
        $white
    );

    .bg-dataviz-#{$bg-index} {
        background-color: $bg-data-viz-color !important;
        fill: $bg-data-viz-color !important;
        stroke: $bg-data-viz-color !important;
    }

    @for $subIndex from 0 through 2 {
        .bg-dataviz-#{$bg-index}-#{$subIndex} {
            background-color: $bg-data-viz-color !important;
            fill: $bg-data-viz-color !important;
            stroke: $bg-data-viz-color !important;

            @if $subIndex > 0 {
                filter: brightness(100% + $subIndex * 15%);
            }
        }
    }

    .border-dataviz-#{$bg-index} {
        border-color: $bg-data-viz-color !important;
    }

    .color-dataviz-#{$bg-index} {
        color: $bg-data-viz-color !important;
        stroke: $bg-data-viz-color !important;
    }

    .color-dataviz-#{$bg-index}-0 {
        &,
        & > circle {
            fill: $color-opacity-40 !important;
            color: $color-opacity-40 !important;
            stroke: $color-opacity-40 !important;
        }
    }

    .stroke-dataviz-#{$bg-index} {
        circle {
            stroke: $bg-data-viz-color !important;
            stroke-width: 1px;
            filter: brightness(130%);
        }
    }
}