@import './colors';

// GLOBAL STYLES
$text-global : $color-gray-800;
$text-muted: $color-gray-300;
$bg-global: $color-gray-100;

// BACKGROUNDS
$bg-primary: $color-blue-500;
$bg-primary_hover: $color-blue-400;
$bg-primary_active: $color-blue-600;

$bg-secondary: $color-gray-300;
$bg-secondary_hover: $color-gray-200;
$bg-secondary_active: $color-gray-400;

// FONTS
$font-size-xxxl: 34px  ;
$font-size-xxl:  20px  ;
$font-size-xl:   17px  ;
$font-size-lg:   15px  ;
$font-size-md:   11.5px;
$font-size-sm:   10.5px;
$font-size-xs:   10px  ;

$font-weight-normal: normal;
$font-weight-bold: bold;
$enable-hover-media-query: false;

// BREAKPOINTS
// standard grid breakpoints are taken from bootstrap
$grid-breakpoints: (
  xs: 0px,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

$flex-config: (
  direction: (
    flex-direction: row row-reverse column column-reverse
  ),
  justify: (
    justify-content: flex-start flex-end center space-between space-around
  ),
  align: (
    align-items: flex-start flex-end center
  ),
);

$flex-basis-percentages: (
  100: 100%,
  75:  75%,
  66:  66.66%,
  50:  50%,
  33:  33.33%,
  25:  25%
);

$flex-grow-factors: 1, 2, 3, 4, 5;

// TRANSITIONS
$transition-all: all 0.25s ease;
$transition-background: background 0.25s ease;

// MARGINS
$margin-100: 3px;
$margin-200: 6px;
$margin-300: 12px;
$margin-400: 18px;
$margin-500: 24px;
$margin-600: 30px;
$margin-700: 36px;
$margin-800: 42px;
$margin-900: 48px;

// PADDINGS
$padding-100: 3px;
$padding-200: 6px;
$padding-300: 12px;
$padding-400: 18px;
$padding-500: 24px;
$padding-600: 30px;
$padding-700: 36px;
$padding-800: 42px;
$padding-900: 48px;

// CONTAINERS
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

$container-paddings: (
    100: 3px,
    200: 6px,
    300: 12px,
    400: 18px,
    500: 24px,
    600: 30px,
    700: 36px,
    800: 42px,
    900: 48px,
);

// BORDERS
$border-dark: 1px solid $color-gray-500;
$border-mid: 1px solid $color-gray-400;
$border-light: 1px solid $color-gray-300;
$border-primary: 1px solid $brand-primary;
$border-white: 1px solid white;
$border-transparent: 1px solid transparent;
$border-dotted: 1px dotted $color-gray-600;
$border-none: 0px solid transparent;

//border radius
$border-radius-xs:     1px;
$border-radius-sm:     2px;
$border-radius-md:     3px;
$border-radius-lg:     6px;
$border-radius-circle: 50%;

// PANELS
$panel-height-sm: 250px;
$panel-height-md: 350px;
$panel-height-lg: 450px;

// Tray
$tray-header-height: 34px;


//CARD
$card-bg-hover-color: $card_background_hover;
$card-border-color-base: rgb(244, 237, 241);
$card-border-color: $card-border-color-base transparent transparent transparent;
$card-border-radius: 0px;
$card-border-color-hover: $card-border-color transparent $card-bg-hover-color transparent;
$card-border-color-drop-target: $color-green-500;
$card-border-color-drop-target-hover: $color-green-500;
$card_inner_border: 1px solid rgba(222, 222, 222, 1);