@use 'sass:color';

@use '@css-styles/common' as mixins;

//############## FONT ##############

$fontSize: 14px;

//############## AVAILABLE COLORS ##############

$white: #FFFFFF;
$black: #282828;

$gray-00: #FEFEFE;
$gray-10: #F8F9F8;
$gray-14: #F6F6F6;
$gray-20: #F0F1F2;
$gray-22: #F0F0F0;
$gray-25: #EEEEEE;
$gray-28: #E8E8E8;
$gray-30: #E0E4E3;
$gray-33: #e0e0e0;
$gray-35: #CDCDCD;
$gray-40: #B9C3CC;
$gray-45: #9d9d9d;
$gray-50: #757575;
$gray-60: #58585A;
$gray-70: #566060;
$gray-80: #3F4948;
$gray-90: #293232;

$green-50: #eff9eb;
$green-100: #d7f0cc;
$green-200: #bce5ac;
$green-300: #a2db8a;
$green-400: #8cd370;
$green-500: #78ca58;
$green-600: #6aba4f; //MAIN GREEN
$green-700: #56a544;
$green-800: #44913b;
$green-900: #1f6e29;

$orange-50: #fefbea;
$orange-100: #fdf4cb;
$orange-200: #fcedab;
$orange-300: #fae68d;
$orange-400: #f9e179;
$orange-500: #f7dc68;
$orange-600: #f3cc64;
$orange-700: #ecb75d;
$orange-800: #e4a256;
$orange-900: #c78446;
$orange-1000: #ad6b35;

$red-50: #fee8e8;
$red-100: #fdd1d1;
$red-200: #fba3a3;
$red-300: #f97575;
$red-400: #f74747;
$red-500: #ec0e0e; //MAIN RED
$red-600: #d40c0c;
$red-700: #b80a0a;
$red-800: #9c0808;
$red-900: #800707;
$red-1000: #640505;

$blue-50: #eff3fa;
$blue-100: #d4e1f0;
$blue-200: #b9cfe6;
$blue-300: #9ebddc;
$blue-400: #83abd2;
$blue-500: #6899c8;
$blue-600: #4d87be;
$blue-700: #337ab7; //MAIN BLUE
$blue-800: #2d6aa3;
$blue-900: #1f4a73;
$blue-1000: #0d2847;

$dark: #323944;
$semiDark: #3c4453;
$light: #E5E5E5;
$almostWhite: #f5f5f5;
$lightBlue: #5bc0de;
$azure: #00a3e0;
$orangeRed: #f77539;
$orange: #e4a256;
$yellowGreen: #bbdd4f;
$yellow: #d4da03;
$brown: #6b4b02;
$transparentBlack: #00000066;
$warning: #8a6d3b;

$theme:
(
    fontFamily: 'Roboto',
    page:
    (
        background: $white,
        foreground: $black,
        scrollbar: $gray-35,
    ),
    title:
    (
        page:
        (
            background: $dark,
            foreground: $gray-33,
        ),
    ),
    block:
    (
        background: $white,
        foreground: $black,
        scrollbar: color.scale($white, $lightness: 14%),
        primary:
        (
            padding: var(--size-sm),
            borderRadius: var(--size-borderRadius-xs),
            background: $light,
            foreground: $black,
            scrollbar: $gray-50,
        ),
        secondary:
        (
            padding: var(--size-sm),
            borderRadius: var(--size-borderRadius-xs),
            background: $semiDark,
            foreground: $white,
            scrollbar: color.scale($gray-70, $lightness: 14%),
        ),
    ),
    mainMenu:
    (
        background: $gray-00,
        backgroundGradient: color.scale($gray-00, $lightness: -6%, $saturation: 10%),
        backgroundGradient2: undefined,
        foreground: $gray-60,
        active:
        (
            foreground: $white,
            background: inherit,
        ),
        drawer:
        (
            background: $white,
            foreground: $black,
        )
    ),
    dialog:
    (
        border: $gray-70,
        title:
        (
            background: $dark,
            foreground: $white,
        ),
        content:
        (
            background: $white,
            foreground: $black,
        ),
        closeButton:
        (
            hover:
            (
                background: color.scale($gray-80, $lightness: 10%),
                foreground: color.scale($gray-00, $lightness: 10%),
            ),
        ),
    ),
    input:
    (
        background: $white,
        foreground: $gray-90,
        border: $gray-40,
        padding: mixins.getSize($fontSize, 4) mixins.getSize($fontSize, 6),
        placeholder: 
        (
            foreground: $gray-50,
        ),
        groupAddon:
        (
            background: $gray-14,
            foreground: inherit,
            padding: mixins.getSize($fontSize, 4) mixins.getSize($fontSize, 6),
        ),
        disabled:
        (
            background: $gray-22,
            foreground: $gray-90,
            border: $gray-40,
        ),
        invalid:
        (
            border: $red-500,
        ),
        error:
        (
            background: inherit,
            foreground: $red-500,
            outline: $red-500,
        ),
    ),
    formGroup:
    (
        margin: 0 mixins.getSize($fontSize, 15) mixins.getSize($fontSize, 15) 0,
    ),
    label:
    (
        margin: 0 0 mixins.getSize($fontSize * .9, 4),
        font:
        (
            size: .9em,
            weight: 500,
        ),
        invalid:
        (
            foreground: $red-500,
            background: $red-500,
        ),
    ),
    select:
    (
        tag:
        (
            background: $light,
            foreground: $white,
            padding: mixins.getSize($fontSize * .9, 1) mixins.getSize($fontSize * .9, 3),
            fontSize: .9em,
        ),
    ),
    grid:
    (
        header:
        (
            background: transparent,
            foreground: $black,
            //TODO border bottom
        ),
        evenRow:
        (
            background: $light,
            foreground: $black,
        ),
        oddRow:
        (
            background: $gray-10,
            foreground: $black,
        ),
    ),
    misc:
    (
        separator:
        (
            background: inherit,
            foreground: $gray-30,
        ),
    ),
    level:
    (
        succes: $green-600,
        info: $lightBlue,
        warning: $warning,
        error: $red-500,
        default: $gray-50,
    ),
    weight:
    (
        foreground: $white,
        weight-0: $green-600,
        weight-1: $yellowGreen,
        weight-2: $yellow,
        weight-3: $orange-800,
        weight-4: $orange-900,
        weight-5: $red-500,
    ),
    paging:
    (
        border: $gray-40,
        margin: 0 mixins.getSize($fontSize, 2),
        borderRadius: mixins.getSize($fontSize, 4),
        active:
        (
            border: $light,
        ),
    ),
    alert:
    (
        info:
        (
            background: $lightBlue,
            foreground: $white,
        ),
        warning:
        (
            background: $orange,
            foreground: $white,
        ),
        success:
        (
            background: $green-600,
            foreground: $white,
        ),
        danger:
        (
            background: $red-500,
            foreground: $white,
        ),
        error:
        (
            background: $red-500,
            foreground: $white,
        ),
    ),
    text:
    (
        primary:
        (
            background: inherit,
            foreground: $blue-700,
        ),
        danger:
        (
            background: inherit,
            foreground: $red-500,
        ),
        warning:
        (
            background: inherit,
            foreground: $orange,
        ),
        success:
        (
            background: inherit,
            foreground: $green-600,
        ),
        info:
        (
            background: inherit,
            foreground: $lightBlue,
        ),
    ),
    button:
    (
        spaceBetween: mixins.getSize($fontSize, 15),
        padding: mixins.getSize($fontSize, 4) mixins.getSize($fontSize, 10),
        textTransformation: uppercase,
        fontWeight: normal,
        contentGap: var(--size-xs),
        cursor: pointer,
        disabled:
        (
            opacity: .4,
        ),
        primary:
        (
            background: $green-600,
            foreground: $white,
            borderColor: transparent,
            icon: $green-800,
            disabled:
            (
                background: var(--button-primary-background),
                foreground: var(--button-primary-foreground),
                borderColor: var(--button-primary-borderColor),
                icon: var(--button-primary-icon),
            ),
            hover:
            (
                background: $green-700,
                foreground: $white,
                borderColor: transparent,
                icon: $green-800,
            ),
            active:
            (
                background: $green-700,
                foreground: $white,
                borderColor: transparent,
                icon: $green-800,
            ),
            onlyContent:
            (
                background: transparent,
                foreground: $gray-50,
                borderColor: transparent,
                icon: $gray-50,
                hover:
                (
                    background: transparent,
                    foreground: $green-600,
                    borderColor: transparent,
                    icon: $green-600,
                ),
                active:
                (
                    background: transparent,
                    foreground: $green-600,
                    borderColor: transparent,
                    icon: $green-600,
                ),
                disabled:
                (
                    background: transparent,
                    foreground: $gray-50,
                    borderColor: transparent,
                    icon: $gray-50,
                ),
            ),
        ),
        secondary:
        (
            background: $gray-45,
            foreground: $white,
            borderColor: transparent,
            icon: $gray-50,
            disabled:
            (
                background: var(--button-secondary-background),
                foreground: var(--button-secondary-foreground),
                borderColor: var(--button-secondary-borderColor),
                icon: var(--button-secondary-icon),
            ),
            hover:
            (
                background: $gray-50,
                foreground: $white,
                borderColor: transparent,
                icon: $gray-60,
            ),
            active:
            (
                background: $gray-50,
                foreground: $white,
                borderColor: transparent,
                icon: $gray-60,
            ),
        ),
        danger:
        (
            background: $red-500,
            foreground: $white,
            borderColor: transparent,
            icon: $red-700,
            disabled:
            (
                background: var(--button-danger-background),
                foreground: var(--button-danger-foreground),
                borderColor: var(--button-danger-borderColor),
                icon: var(--button-danger-icon),
            ),
            hover:
            (
                background: $red-600,
                foreground: $white,
                borderColor: transparent,
                icon: $red-800,
            ),
            active:
            (
                background: $red-700,
                foreground: $white,
                borderColor: transparent,
                icon: $red-900,
            ),
        ),
    ),
    slideToggle:
    (
        selected:
        (
            track:
            (
                normal: $gray-30,
                hover: color.scale($gray-30, $lightness: 10%),
                pressed: color.scale($gray-30, $lightness: -10%),
                focus: color.scale($gray-30, $lightness: 10%),
            ),
            handle:
            (
                normal: $semiDark,
                hover: $semiDark,
                pressed: $semiDark,
                focus: $semiDark,
            ),
            icon: $white,
        ),
        unselected:
        (
            track:
            (
                normal: $gray-30,
                hover: color.scale($gray-30, $lightness: 10%),
                pressed: color.scale($gray-30, $lightness: -10%),
                focus: color.scale($gray-30, $lightness: 10%),
            ),
            handle:
            (
                normal: $gray-60,
                hover: $gray-80,
                pressed: $gray-90,
                focus: $gray-80,
            ),
            icon: $white,
        ),
        foreground: $gray-25,
        onPrimary:
        (
            foreground: $black,
            selected:
            (
                track:
                (
                    normal: $gray-60,
                    hover: color.scale($gray-60, $lightness: 10%),
                    pressed: color.scale($gray-60, $lightness: -10%),
                    focus: color.scale($gray-60, $lightness: 10%),
                ),
                handle:
                (
                    normal: $semiDark,
                    hover: $semiDark,
                    pressed: $semiDark,
                    focus: $semiDark,
                ),
                icon: $white,
            ),
            unselected:
            (
                track:
                (
                    normal: $gray-40,
                    hover: color.scale($gray-40, $lightness: 10%),
                    pressed: color.scale($gray-40, $lightness: -10%),
                    focus: color.scale($gray-40, $lightness: 10%),
                ),
                handle:
                (
                    normal: $gray-60,
                    hover: $gray-80,
                    pressed: $gray-90,
                    focus: $gray-80,
                ),
                icon: $white,
            ),
        ),
    ),
);

$paging:
(
    pagingCommon:
    (
        anchor:
        (
            background: $white,
            foreground: $green-600,
            active:
            (
                background: $green-600,
                foreground: $white,
            ),
        ),
    ),
);

$select:
(
    select:
    (
        popup:
        (
            container:
            (
                background: $white,
                padding: mixins.getSize($fontSize, 5) 0,
                borderColor: $gray-40,
                boxShadow: 0 6px 12px rgba(0,0,0,.175),
            ),
            option:
            (
                selected:
                (
                    background: $gray-28,
                    backgroundImage: linear-gradient(to bottom,$gray-14 0,$gray-28 100%),
                ),
                active:
                (
                    background: $gray-28,
                    backgroundImage: linear-gradient(to bottom,$gray-14 0,$gray-28 100%),
                ),
                padding: mixins.getSize($fontSize, 3) mixins.getSize($fontSize, 12),
            ),
        ),
    ),
);