@use 'sass:color';

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

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

$fontSize: 16px;

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

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

$alpha-black-05: #0000000D;
$alpha-black-10: #0000001A;
$alpha-black-20: #00000033;
$alpha-black-30: #0000004D;
$alpha-black-40: #00000066;
$alpha-black-50: #00000080;
$alpha-black-60: #00000099;
$alpha-black-70: #000000B3;
$alpha-black-80: #000000CC;
$alpha-black-90: #000000E6;

$gray-00: #FEFEFE;
$gray-10: #F8F9F8;
$gray-20: #F0F1F2;
$gray-22: #F0F0F0;
$gray-25: #EEEEEE;
$gray-30: #E0E4E3;
$gray-40: #B9C3CC;
$gray-50: #757575;
$gray-60: #58585A;
$gray-70: #566060;
$gray-80: #3F4948;
$gray-90: #293232;

$teal-50: #dff1f3;
$teal-100: #CDEDEB;
$teal-200: #b1d8d6;
$teal-300: #59b8b9;
$teal-400: #00a3a3;
$teal-500: #009391;
$teal-600: #008683;
$teal-700: #0B6363;
$teal-800: #006662;
$teal-900: #0E4A56;

$green-50: #e5f6eb;
$green-100: #c1e7cd;
$green-200: #98d8ad;
$green-300: #6cca8c;
$green-400: #47be74;
$green-500: #10b25b;
$green-600: #6aba4f;
$green-700: #009145;
$green-800: #00803a;
$green-900: #006026;

$red-50: #fde9eb;
$red-100: #fac7c9;
$red-200: #e6918c;
$red-300: #d76660;
$red-400: #dd4539;
$red-500: #ec0e0e;
$red-600: #d0271b;
$red-700: #bf1c16;
$red-800: #b2130e;
$red-900: #a30000;

$blue-50: #e0f4ff;
$blue-100: #b1e3ff;
$blue-200: #7dd1ff;
$blue-300: #44c0ff;
$blue-400: #09b2ff;
$blue-500: #00a4fe;
$blue-600: #0096ee;
$blue-700: #0083d9;
$blue-800: #0072c5;
$blue-900: #0052a3;

$orange-50: #fff3e1;
$orange-100: #ffe0b5;
$orange-200: #ffcd85;
$orange-300: #ffb855;
$orange-400: #e4a256;
$orange-500: #ff9a1c;
$orange-600: #fb8e1a;
$orange-700: #f47f18;
$orange-800: #ee6f16;
$orange-900: #e45614;

$yellow-50: #fafbe5;
$yellow-100: #f3f3bd;
$yellow-200: #eaed92;
$yellow-300: #e1e565;
$yellow-400: #dadf40;
$yellow-500: #d3da03;
$yellow-600: #c6c800;
$yellow-700: #b4b200;
$yellow-800: #a39b00;
$yellow-900: #877500;

$theme:
(
    fontFamily: 'Roboto',
    page:
    (
        background: $white,
        foreground: $black,
        scrollbar: color.scale($white, $lightness: 14%),
    ),
    title:
    (
        page:
        (
            background: $gray-90,
            foreground: $gray-25,
        ),
    ),
    block:
    (
        background: $white,
        foreground: $black,
        scrollbar: color.scale($white, $lightness: 14%),
        primary:
        (
            padding: var(--size-sm),
            borderRadius: var(--size-borderRadius-xs),
            background: $gray-10,
            foreground: $black,
            scrollbar: $gray-50,
        ),
        secondary:
        (
            padding: var(--size-sm),
            borderRadius: var(--size-borderRadius-xs),
            background: $gray-70,
            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: $gray-80,
            foreground: $white,
        ),
        content:
        (
            background: $gray-10,
            foreground: $black,
        ),
        closeButton:
        (
            hover:
            (
                background: color.scale($gray-80, $lightness: 10%),
                foreground: color.scale($gray-00, $lightness: 10%),
            ),
        ),
    ),
    inputs:
    (
        columnGap: mixins.getSize($fontSize, 20),
        rowGap: mixins.getSize($fontSize, 20),
    ),
    input:
    (
        background: $white,
        foreground: $gray-90,
        border: $gray-40,
        padding: mixins.getSize($fontSize, 14) mixins.getSize($fontSize, 12),
        placeholder: 
        (
            foreground: $gray-50,
        ),
        groupAddon:
        (
            background: color.scale($gray-00, $lightness: 30%),
            foreground: inherit,
            padding: mixins.getSize($fontSize, 14) 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,
        ),
        errors:
        (
            background: inherit,
            foreground: $red-500,
            fontSize: 0.7em,
            padding: 0,
            border:
            (
                color: transparent,
                width: 0,
                style: solid,
            ),
        ),
    ),
    label:
    (
        margin: 0 0 mixins.getSize($fontSize, 8),
        font:
        (
            size: 1em,
            weight: normal,
        ),
        invalid:
        (
            foreground: $red-500,
            background: inherit,
        ),
    ),
    select:
    (
        tag:
        (
            background: $teal-400,
            foreground: $white,
            padding: mixins.getSize($fontSize * .9, 1) mixins.getSize($fontSize * .9, 3),
            fontSize: .9em,
        ),
    ),
    grid:
    (
        header:
        (
            background: $gray-80,
            foreground: $white,
        ),
        evenRow:
        (
            background: $gray-20,
            foreground: $black,
        ),
        oddRow:
        (
            background: $white,
            foreground: $black,
        ),
    ),
    misc:
    (
        separator:
        (
            background: inherit,
            foreground: $gray-30,
        ),
    ),
    level:
    (
        succes: $green-600,
        info: $blue-300,
        warning: $orange-400,
        error: $red-500,
        default: $gray-50,
    ),
    weight:
    (
        foreground: $white,
        weight-0: $green-600,
        weight-1: $yellow-400,
        weight-2: $yellow-600,
        weight-3: $orange-400,
        weight-4: $orange-900,
        weight-5: $red-500,
    ),
    alert:
    (
        info:
        (
            background: $blue-300,
            foreground: $white,
        ),
        warning:
        (
            background: $orange-400,
            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: $teal-400,
        ),
        danger:
        (
            background: inherit,
            foreground: $red-500,
        ),
        warning:
        (
            background: inherit,
            foreground: $orange-400,
        ),
        success:
        (
            background: inherit,
            foreground: $green-600,
        ),
        info:
        (
            background: inherit,
            foreground: $blue-300,
        ),
    ),
    buttons:
    (
        columnGap: mixins.getSize($fontSize, 20),
        rowGap: mixins.getSize($fontSize, 20),
    ),
    button:
    (
        spaceBetween: mixins.getSize($fontSize, 20),
        padding: mixins.getSize($fontSize, 8) mixins.getSize($fontSize, 24),
        textTransformation: none,
        fontWeight: normal,
        lineHeight: unset,
        letterSpacing: var(--size-1px),
        contentGap: var(--size-xs),
        cursor: pointer,
        primary:
        (
            background: $teal-400,
            foreground: $white,
            borderColor: transparent,
            icon: $teal-600,
            hover:
            (
                background: $teal-500,
                foreground: $white,
                borderColor: transparent,
                icon: $teal-600,
            ),
            active:
            (
                background: $teal-500,
                foreground: $white,
                borderColor: transparent,
                icon: $teal-600,
            ),
            onlyContent:
            (
                background: transparent,
                foreground: $teal-800,
                borderColor: transparent,
                icon: $teal-800,
                hover:
                (
                    background: transparent,
                    foreground: $teal-900,
                    borderColor: transparent,
                    icon: $teal-900,
                ),
                active:
                (
                    background: transparent,
                    foreground: $teal-900,
                    borderColor: transparent,
                    icon: $teal-900,
                ),
                disabled:
                (
                    background: transparent,
                    foreground: $teal-800,
                    borderColor: transparent,
                    icon: $teal-800,
                ),
            ),
        ),
        secondary:
        (
            background: $teal-100,
            foreground: $teal-900,
            borderColor: transparent,
            icon: $alpha-black-10,
            hover:
            (
                background: $teal-200,
                foreground: $teal-900,
                borderColor: transparent,
                icon: $alpha-black-10,
            ),
            active:
            (
                background: $teal-200,
                foreground: $teal-900,
                borderColor: transparent,
                icon: $alpha-black-10,
            ),
        ),
        danger:
        (
            background: $red-500,
            foreground: $white,
            borderColor: transparent,
            icon: $red-800,
            hover:
            (
                background: $red-600,
                foreground: $white,
                borderColor: transparent,
                icon: $red-900,
            ),
            active:
            (
                background: $red-600,
                foreground: $white,
                borderColor: transparent,
                icon: $red-900,
            ),
        ),
    ),
    slideToggle:
    (
        selected:
        (
            track:
            (
                normal: $teal-400,
                hover: $teal-600,
                pressed: $teal-600,
                focus: $teal-600,
            ),
            handle:
            (
                normal: $teal-700,
                hover: $teal-900,
                pressed: $teal-900,
                focus: $teal-900,
            ),
            state-layer:
            (
                normal: transparent,
                hover: transparent,
                pressed: transparent,
                focus: transparent,
            ),
            icon: $white,
        ),
        unselected:
        (
            track:
            (
                normal: $gray-30,
                hover: $gray-30,
                pressed: $gray-30,
                focus: $gray-30,
            ),
            handle:
            (
                normal: $gray-70,
                hover: $gray-90,
                pressed: $gray-90,
                focus: $gray-90,
            ),
            state-layer:
            (
                normal: transparent,
                hover: transparent,
                pressed: transparent,
                focus: transparent,
            ),
            icon: $gray-10,
        ),
        foreground: $gray-25,
        onPrimary:
        (
            foreground: $black,
            selected:
            (
                track:
                (
                    normal: $teal-400,
                    hover: $teal-600,
                    pressed: $teal-600,
                    focus: $teal-600,
                ),
                handle:
                (
                    normal: $teal-700,
                    hover: $teal-900,
                    pressed: $teal-900,
                    focus: $teal-900,
                ),
                state-layer:
                (
                    normal: transparent,
                    hover: transparent,
                    pressed: transparent,
                    focus: transparent,
                ),
                icon: $white,
            ),
            unselected:
            (
                track:
                (
                    normal: $gray-30,
                    hover: $gray-30,
                    pressed: $gray-30,
                    focus: $gray-30,
                ),
                handle:
                (
                    normal: $gray-70,
                    hover: $gray-90,
                    pressed: $gray-90,
                    focus: $gray-90,
                ),
                state-layer:
                (
                    normal: transparent,
                    hover: transparent,
                    pressed: transparent,
                    focus: transparent,
                ),
                icon: $gray-10,
            ),
        ),
    ),
);

$paging:
(
    pagingCommon:
    (
        anchor:
        (
            background: $white,
            foreground: $teal-700,
            active:
            (
                background: $teal-400,
                foreground: $white,
            ),
        ),
    ),
);