@use 'sass:color';
@use 'sass:list';
@use 'sass:map';

$data-colors: (
    'light-blue': (
        '1000': #042744,
        '900': #064374,
        '800': #095fa4,
        '700': #0c7bd5,
        '600': #2296f3,
        '500': #51acf6,
        '400': #81c3f8,
        '300': #b2dafb,
        '200': #e2f1fd,
        '150': #fafdff,
    ),
    'purple': (
        '1000': #2c0b32,
        '900': #51155b,
        '800': #761e85,
        '700': #9c28b0,
        '600': #bb38d2,
        '500': #c961db,
        '400': #d78be5,
        '300': #e5b4ee,
        '200': #f4def7,
        '150': #fbf3fc,
    ),
    'dark-purple': (
        '1000': #251542,
        '900': #3b2169,
        '800': #512d8f,
        '700': #673ab7,
        '600': #8158ca,
        '500': #9f7fd6,
        '400': #bca6e3,
        '300': #d9cdef,
        '250': #e8e0f5,
        '150': #f6f3fb,
    ),
    'magenta': (
        '1000': #410618,
        '900': #700b2a,
        '800': #9e0f3b,
        '700': #cd144d,
        '600': #ea2763,
        '500': #ef5886,
        '400': #f386a7,
        '300': #f8b5c9,
        '200': #fce3eb,
        '150': #fffafc,
    ),
    'red': (
        '1000': #5c0a05,
        '900': #8d1007,
        '800': #bd150a,
        '700': #ee1b0c,
        '600': #f54336,
        '500': #f87268,
        '400': #faa099,
        '300': #fccdca,
        '250': #fde4e2,
        '150': #fffbfa,
    ),
    'orange': (
        '1000': #331400,
        '900': #662700,
        '800': #993b00,
        '700': #cc4e00,
        '600': #ff6200,
        '500': #ff8133,
        '400': #ffa166,
        '300': #ffc199,
        '200': #ffe0cc,
        '150': #ffefe5,
    ),
    'yellow': (
        '1000': #332201,
        '900': #654301,
        '800': #976502,
        '700': #ca8702,
        '600': #fca903,
        '500': #fdba35,
        '400': #fdcb68,
        '300': #fedc9a,
        '200': #feedcc,
        '150': #fff7e6,
    ),
    'sap-green': (
        '1000': #173a1a,
        '900': #265f2b,
        '800': #34833c,
        '700': #43a84d,
        '600': #5fbf68,
        '500': #83ce8a,
        '400': #a7dcad,
        '300': #ccebcf,
        '250': #def2e0,
        '150': #f0f9f1,
    ),
    'green': (
        '1000': #0a291f,
        '900': #15513d,
        '800': #1f7a5c,
        '700': #2aa27a,
        '600': #34cb99,
        '500': #5dd5ad,
        '400': #85e0c2,
        '300': #aeead6,
        '200': #d6f5eb,
        '150': #eafaf5,
    ),
    'teal': (
        '1000': #084144,
        '900': #0e6c71,
        '800': #14979e,
        '700': #1ac2cc,
        '600': #33dbe5,
        '500': #61e3eb,
        '400': #8eebf1,
        '300': #bbf3f7,
        '250': #d2f7f9,
        '150': #e8fbfc,
    ),
    'indigo': (
        '1000': #19232e,
        '900': #2b3c50,
        '800': #3d5671,
        '700': #4e6f92,
        '600': #6788ad,
        '500': #88a2bf,
        '400': #a9bcd1,
        '300': #cad6e2,
        '200': #ebeff4,
        '150': #fcfcfd,
    ),
    'dark-magenta': (
        '1000': #290232,
        '900': #510363,
        '800': #7a0594,
        '700': #a307c5,
        '600': #cc09f6,
        '500': #d63af8,
        '400': #e06bfa,
        '300': #ea9cfb,
        '200': #f5cefd,
        '150': #fae6fe,
    ),
    'ultramarine': (
        '1000': #0d004d,
        '900': #150080,
        '800': #1e00b2,
        '700': #2600e5,
        '600': #401aff,
        '500': #6a4dff,
        '400': #9580ff,
        '300': #bfb2ff,
        '250': #d5ccff,
        '150': #eae5ff,
    ),
    'royal-blue': (
        '1000': #001638,
        '900': #002b6b,
        '800': #003f9e,
        '700': #0054d1,
        '600': #0569ff,
        '500': #3888ff,
        '400': #6ba6ff,
        '300': #9ec5ff,
        '200': #d1e3ff,
        '150': #ebf3ff,
    ),
);
$chart-colors: (
    'awa': (
        'indigo-700',
        'indigo-600',
    ),
    'amazon-music': (
        'ultramarine-600',
        'ultramarine-500',
    ),
    'apple-music': (
        'magenta-600',
        'magenta-500',
    ),
    'apple-podcast': (
        'dark-magenta-600',
        'dark-magenta-500',
    ),
    'beatport': (
        'green-700',
        'green-600',
    ),
    'chartable': (
        'indigo-600',
        'indigo-500',
    ),
    'deezer': (
        'purple-700',
        'purple-600',
    ),
    'facebook': (
        'royal-blue-600',
        'royal-blue-500',
    ),
    'google-play': (
        'red-600',
        'red-500',
    ),
    'instagram': (
        'dark-purple-700',
        'dark-purple-600',
    ),
    'kugou': (
        'light-blue-600',
        'light-blue-500',
    ),
    'kuwu': (
        'yellow-700',
        'yellow-600',
    ),
    'line-japan': (
        'sap-green-900',
        'sap-green-800',
    ),
    'meta': (
        'light-blue-700',
        'light-blue-600',
    ),
    'napster': (
        'royal-blue-700',
        'royal-blue-600',
    ),
    'pandora': (
        'indigo-1000',
        'indigo-900',
    ),
    'qq': (
        'green-800',
        'green-700',
    ),
    'recochoku': (
        'magenta-700',
        'magenta-600',
    ),
    'shazam': (
        'light-blue-800',
        'light-blue-700',
    ),
    'shopify': (
        'sap-green-800',
        'sap-green-700',
    ),
    'soundcloud': (
        'orange-600',
        'orange-500',
    ),
    'spotify': (
        'sap-green-700',
        'sap-green-600',
    ),
    'stitcher': (
        'dark-magenta-700',
        'dark-magenta-600',
    ),
    'tiktok': (
        'teal-800',
        'teal-700',
    ),
    'twitter': (
        'indigo-800',
        'indigo-700',
    ),
    'wynk': (
        'red-800',
        'red-700',
    ),
    'youtube': (
        'red-700',
        'red-600',
    ),
    'other': (
        'teal-1000',
        'teal-900',
    ),
);
$data-colour-index: (
    '1': (
        'colour': 'teal',
        'active-1': '800',
        'active-2': '700',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '2': (
        'colour': 'dark-purple',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '3': (
        'colour': 'dark-magenta',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '4': (
        'colour': 'royal-blue',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '5': (
        'colour': 'purple',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '6': (
        'colour': 'light-blue',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '7': (
        'colour': 'indigo',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '8': (
        'colour': 'magenta',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '9': (
        'colour': 'ultramarine',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '10': (
        'colour': 'yellow',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '11': (
        'colour': 'orange',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '12': (
        'colour': 'sap-green',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '13': (
        'colour': 'red',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '14': (
        'colour': 'green',
        'active-1': '800',
        'active-2': '700',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '15': (
        'colour': 'red',
        'active-1': '800',
        'active-2': '700',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '16': (
        'colour': 'dark-magenta',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '17': (
        'colour': 'royal-blue',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '18': (
        'colour': 'red',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '19': (
        'colour': 'light-blue',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '20': (
        'colour': 'green',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '21': (
        'colour': 'magenta',
        'active-1': '700',
        'active-2': '600',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '22': (
        'colour': 'indigo',
        'active-1': '600',
        'active-2': '500',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '23': (
        'colour': 'sap-green',
        'active-1': '800',
        'active-2': '700',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '24': (
        'colour': 'indigo',
        'active-1': '800',
        'active-2': '700',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '25': (
        'colour': 'light-blue',
        'active-1': '800',
        'active-2': '700',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
    '26': (
        'colour': 'sap-green',
        'active-1': '900',
        'active-2': '800',
        'inactive-1': '300',
        'inactive-2': '250',
    ),
    '27': (
        'colour': 'indigo',
        'active-1': '1000',
        'active-2': '900',
        'inactive-1': '300',
        'inactive-2': '200',
    ),
);

/* stylelint-disable custom-property-pattern */

:root {
    @each $color, $levels in $data-colors {
        @each $level, $value in $levels {
            --#{$color}-#{$level}: #{$value};
        }
    }

    @each $index, $value in $data-colour-index {
        $name: 'data-#{$index}';
        $colour: map.get($value, 'colour');
        $active1: map.get($value, 'active-1');
        $active2: map.get($value, 'active-2');
        $inactive1: map.get($value, 'inactive-1');
        $inactive2: map.get($value, 'inactive-2');

        --#{$name}: var(--#{$colour}-#{$active1});

        $chart-colors: map.set(
            $chart-colors,
            '#{$name}-inactive',
            ('#{$colour}-#{$inactive1}', '#{$colour}-#{$inactive2}')
        ) !global;
        $chart-colors: map.set(
            $chart-colors,
            $name,
            ('#{$colour}-#{$active1}', '#{$colour}-#{$active2}')
        ) !global;
    }

    @each $name, $colours in $chart-colors {
        $colour-one: list.nth($colours, 1);
        $colour-two: list.nth($colours, 2);

        --#{$name}-line: var(--#{$colour-one});
        --#{$name}-area: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--#{$colour-one}), transparent 25%),
            color-mix(in srgb, var(--#{$colour-two}), transparent 25%)
        );
        --#{$name}-donut: conic-gradient(
            from 300deg at 50% 50%,
            var(--#{$colour-one}) 0deg,
            var(--#{$colour-two}) 120deg,
            var(--#{$colour-one}) 360deg
        );
        --#{$name}-column: linear-gradient(to top, var(--#{$colour-one}), var(--#{$colour-two}));
        --#{$name}-bar: linear-gradient(to right, var(--#{$colour-one}), var(--#{$colour-two}));
    }
}

/* stylelint-enable custom-property-pattern */