@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-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;

$dark: #323944;
$semiDark: #3c4453;
$light: #E5E5E5;

$almostWhite: #f5f5f5;
$green: #6aba4f;
$lightBlue: #5bc0de;
$blue: #337ab7;
$azure: #00a3e0;
$red: #ec0e0e;
$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,
    ),
    primary:
    (
        background: $light,
        foreground: $black,
        scrollbar: $gray-50,
    ),
    secondary:
    (
        background: $semiDark,
        foreground: $white,
        scrollbar: color.scale($gray-70, $lightness: 14%),
    ),
    block:
    (
        background: $white,
        foreground: $black,
        scrollbar: color.scale($white, $lightness: 14%),
    ),
    pageTitle:
    (
        background: $dark,
        foreground: $gray-33,
    ),
    mainMenu:
    (
        background: $gray-00,
        backgroundGradient: color.scale($gray-00, $lightness: -6%, $saturation: 10%),
        backgroundGradientDark: color.scale($gray-00, $lightness: -12%, $saturation: 2%),
        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: $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,
        ),
        error:
        (
            background: inherit,
            foreground: $red,
            outline: $red,
        ),
    ),
    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,
            background: $red,
        ),
    ),
    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,
        ),
    ),
    separator:
    (
        background: inherit,
        foreground: $gray-30,
    ),
    level:
    (
        succes: $green,
        info: $lightBlue,
        warning: $warning,
        error: $red,
        default: $gray-50,
    ),
    weight:
    (
        foreground: $white,
        weight-0: $green,
        weight-1: $yellowGreen,
        weight-2: $yellow,
        weight-3: $orange,
        weight-4: $orangeRed,
        weight-5: $red,
    ),
    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,
            foreground: $white,
        ),
        danger:
        (
            background: $red,
            foreground: $white,
        ),
        error:
        (
            background: $red,
            foreground: $white,
        ),
    ),
    text:
    (
        primary:
        (
            background: inherit,
            foreground: $blue,
        ),
        danger:
        (
            background: inherit,
            foreground: $red,
        ),
        warning:
        (
            background: inherit,
            foreground: $orange,
        ),
        success:
        (
            background: inherit,
            foreground: $green,
        ),
        info:
        (
            background: inherit,
            foreground: $lightBlue,
        ),
    ),
    button:
    (
        spaceBetween: mixins.getSize($fontSize, 15),
        padding: mixins.getSize($fontSize, 4) mixins.getSize($fontSize, 10),
        textTransformation: uppercase,
        primary:
        (
            background: $green,
            foreground: $white,
        ),
        secondary:
        (
            background: $gray-45,
            foreground: $white,
        ),
        info:
        (
            background: $lightBlue,
            foreground: $white,
        ),
        default:
        (
            background: $gray-45,
            foreground: $white,
        ),
        success:
        (
            background: $green,
            foreground: $white,
        ),
        warning:
        (
            background: $yellow,
            foreground: $white,
        ),
        danger:
        (
            background: $orange,
            foreground: $white,
        ),
        error:
        (
            background: $red,
            foreground: $white,
        ),
        icon:
        (
            background: inherit,
            foreground: $gray-50,
            hover:
            (
                background: inherit,
                foreground: $green,
            ),
        ),
    ),
    slideToggle:
    (
        track:
        (
            normal: $light,
            hover: $semiDark,
            pressed: $dark,
            focus: $semiDark,
        ),
        handle:
        (
            normal: $semiDark,
            hover: $dark,
            pressed: $dark,
            focus: $dark,
        ),
        icon: $white,
        foreground: $gray-25,
    )
);

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