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

$vszpDark: #0E4A56;
$vszpSemidark: #0B6363;
$vszp: #00A3A3;
$vszpLight: #CDEDEB;

$almostWhite: #f5f5f5;
$green: #6aba4f;
$lightBlue: #5bc0de;
$blue: #337ab7;
$azure: #00a3e0;
$red: #ec0e0e;
$orangeRed: #e45514;
$orange: #e4a256;
$yellowGreen: #bbdd4f;
$yellow: #d4da03;
$brown: #6b4b02;
$transparentBlack: #00000066;

$theme:
(
    fontFamily: 'Roboto',
    page:
    (
        background: $white,
        foreground: $black,
        scrollbar: color.scale($white, $lightness: 14%),
    ),
    primary:
    (
        background: $gray-10,
        foreground: $black,
        scrollbar: $gray-50,
    ),
    secondary:
    (
        background: $gray-70,
        foreground: $white,
        scrollbar: color.scale($gray-70, $lightness: 14%),
    ),
    block:
    (
        background: $white,
        foreground: $black,
        scrollbar: color.scale($white, $lightness: 14%),
    ),
    pageTitle:
    (
        background: $gray-90,
        foreground: $gray-25,
    ),
    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: $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, 15),
        rowGap: mixins.getSize($fontSize, 15),
    ),
    input:
    (
        background: $white,
        foreground: $gray-90,
        border: $gray-40,
        padding: mixins.getSize($fontSize, 8) mixins.getSize($fontSize, 12),
        placeholder: $gray-50,
        groupAddon:
        (
            background: color.scale($gray-00, $lightness: 30%),
            foreground: inherit,
            padding: mixins.getSize($fontSize, 8) mixins.getSize($fontSize, 4),
        ),
        disabled:
        (
            background: $gray-22,
            foreground: $gray-90,
            border: $gray-40,
        ),
        invalid:
        (
            border: $red,
        ),
        error:
        (
            background: inherit,
            foreground: $red,
            outline: $red,
        ),
        errors:
        (
            background: inherit,
            foreground: $red,
            fontSize: 0.7em,
            padding: 0,
            border:
            (
                color: transparent,
                width: 0,
                style: solid,
            ),
        ),
    ),
    label:
    (
        margin: 0 0 mixins.getSize($fontSize * .9, 4),
        font:
        (
            size: .9em,
            weight: 500,
        ),
        invalid:
        (
            foreground: $red,
            background: inherit,
        ),
    ),
    select:
    (
        tag:
        (
            background: $vszp,
            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,
        ),
    ),
    separator:
    (
        background: inherit,
        foreground: $gray-30,
    ),
    level:
    (
        succes: $green,
        info: $lightBlue,
        warning: $orange,
        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,
    ),
    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: $vszp,
        ),
        danger:
        (
            background: inherit,
            foreground: $red,
        ),
        warning:
        (
            background: inherit,
            foreground: $orange,
        ),
        success:
        (
            background: inherit,
            foreground: $green,
        ),
        info:
        (
            background: inherit,
            foreground: $lightBlue,
        ),
    ),
    buttons:
    (
        columnGap: mixins.getSize($fontSize, 15),
        rowGap: mixins.getSize($fontSize, 15),
    ),
    button:
    (
        spaceBetween: mixins.getSize($fontSize, 15),
        padding: mixins.getSize($fontSize, 6) mixins.getSize($fontSize, 16),
        textTransformation: none,
        primary:
        (
            background: $vszp,
            foreground: $white,
        ),
        secondary:
        (
            background: $vszpLight,
            foreground: $vszpDark,
        ),
        info:
        (
            background: $lightBlue,
            foreground: $white,
        ),
        default:
        (
            background: $vszpLight,
            foreground: $vszpDark,
        ),
        success:
        (
            background: $green,
            foreground: $white,
        ),
        warning:
        (
            background: $orange,
            foreground: $white,
        ),
        danger:
        (
            background: $red,
            foreground: $white,
        ),
        error:
        (
            background: $red,
            foreground: $white,
        ),
        icon:
        (
            background: inherit,
            foreground: $vszpSemidark,
            hover:
            (
                background: inherit,
                foreground: $vszpDark,
            ),
        ),
    ),
    slideToggle:
    (
        track:
        (
            normal: $vszp,
            hover: $vszpSemidark,
            pressed: $vszpDark,
            focus: $vszpSemidark,
        ),
        handle:
        (
            normal: $vszpSemidark,
            hover: $vszpDark,
            pressed: $vszpDark,
            focus: $vszpDark,
        ),
        icon: $white,
        foreground: $gray-25,
        onPrimary:
        (
            foreground: $black,
        ),
    ),
);

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