@import "mixins";

//----------------------------
// GENERAL SETTINGS
//----------------------------

// FONT
$font: Lato;
$font-family: $font, Arial, sans-serif;
$font-accent: BebasNeue;
$font-accent-family: $font-accent, $font, Arial, sans-serif;
$font-size: 14px;
$font-size-big: 18px;
$font-size-small: 12px;

// SIZES && INDICES
$desktop-block-max-width: 1024px;
$scrollbar-width: 6px;
$chart-index: 4000;
$mm-width: 44px;
$mm-zindex: 9995;
$so-zindex: 9004;
$cdk-drag-item-height: 24px;
$mat-icon-size: 24px;
$mat-icon-size-small: 18px;
$mat-icon-size-large: 32px;

// COLOURS ARE STORED IN THEME.MODEL, CHANGE THEM THERE
// THIS HERE IS JUST TO HAVE EASY ACCESSIBLE VARIABLES IN CSS
$bg: get-color('bg');
$bg-op-max: get-color('bg', var(--bg-op-max));
$bg-op-min: get-color('bg', var(--bg-op-min));
$bg-overlay: get-color('bg', var(--bg-op-overlay));
$bg-accent: adjust-lightness('bg', var(--bg-accent));
$bg-darken: adjust-lightness('bg', var(--bg-darken));
$bg-lighten: adjust-lightness('bg', var(--bg-lighten));

$color: get-color('color');
$color-op-max: get-color('color', var(--color-op-max));
$color-op-min: get-color('color', var(--color-op-min));

$primary: get-color('primary');
$primary-op-max: get-color('primary', var(--primary-op-max));
$primary-op-min: get-color('primary', var(--primary-op-min));
$accent: get-color('accent');
$accent-op-max: get-color('accent', var(--accent-op-max));
$accent-op-min: get-color('accent', var(--accent-op-min));
$secondary: get-color('secondary');
$secondary-op-max: get-color('secondary', var(--secondary-op-max));
$secondary-op-min: get-color('secondary', var(--secondary-op-min));
$error: get-color('error');
$error-op-max: get-color('error', var(--error-op-max));
$error-op-min: get-color('error', var(--error-op-min));
$disabled: get-color('disabled');
$disabled-op-max: get-color('disabled', var(--disabled-op-max));
$disabled-op-min: get-color('disabled', var(--disabled-op-min));
$table-odd-color: adjust-lightness('bg', var(--table-odd));
$table-even-color: adjust-lightness('bg', var(--table-even));

// BORDERS, MARGINS AND PADDINGS
$border-radius: 2px;
$border-width: 2px;
$table-border-width: 1px;
$border: $border-width solid $bg-darken;
$box-shadow-in: inset 4px 4px 8px $bg-darken, inset -4px -4px 8px $bg-lighten;
$box-shadow-out: 4px 4px 8px $bg-darken, -4px -4px 8px $bg-lighten;
$padding-big: 14px;
$padding-small: $padding-big * 0.5;

// MEDIA QUERIES
$desktop: "screen and (min-width: 1025px)";
$tablet-portrait: "screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 1024px) and (orientation: portrait)";
$tablet-landscape: "screen and (min-width: 840px) and (max-width: 1024px) and (max-height: 1024px) and (orientation: landscape)";
$phone-portrait: "screen and (max-width: 767px) and (orientation: portrait)";
$phone-landscape: "screen and (max-height: 420px) and (orientation: landscape)";