// ##### CONFIG #####
// ==================

// VARIABLES
// ---------

// APP NAME
// set top class name of app.
$app-name: 'cvco' !default;
$n: $app-name !default;

// PATHS
// usage: url(#{$image-path}arrow.svg)
$image-path: '../../img/' !default;

// BRAND COLORS
$brand1: #003a5d !default; // 'primary'
$brand2: #223182 !default; // 'secondary'
$brand3: #4a48c1 !default; // 'tertiary'

// UI COLORS
$interaction: $brand3 !default;
$interaction-dark: $brand2 !default;

// NEGATIVE
$negative: #db1639 !default;
$negative-dark: #ad001f !default;

// GREYS
$grey-a: #eff3f6 !default;
$grey-b: #dee3e5 !default;
$grey-c: #a3b4bf !default;
$grey-d: #6a7f8c !default;
$grey-e: #3d4166 !default;

// DISABLED
$disabled: #5e727b; // 5:1

// BLACK & WHITE
$white: #fff !default;
$black: #000 !default;

// BACKGROUND COLORS
$chat-bg: $white !default;

// THREADLIST
$threadlist-agent-text-bgcolor: $grey-a;
$threadlist-user-text-bgcolor: $brand2;

// TYPOGRAPHY
$fontsize-tiny: 10px !default;
$fontsize-small: 12px !default;
$fontsize-medium: 14px !default;
$fontsize-default: 16px !default;
$fontsize-large: 18px !default;
$fontsize-xlarge: 21px !default;
$fontsize-xxlarge: 24px !default;

// FONT-WEIGHTS
$fontweight-light: 300 !default;
$fontweight-regular: 400 !default;
$fontweight-semibold: 600 !default;
$fontweight-bold: 700 !default;

// FONT-FAMILY
$fontfamily-default: arial, helvetica, sans-serif !default;

// SPACER
$spacer: 20px !default;

// BORDER
$thin-border: 1px !default;

// BORDER-RADIUS
$borderradius: $spacer * 0.5 !default;
$borderradius-small: $borderradius * 0.5 !default;
$borderradius-large: $borderradius * 2 !default;

// DIMENSIONS
$chat-window-width: $spacer * 18 !default;
$chat-window-height: $spacer * 36 !default;

// CHAT INLINE
$chat-inline-height: $spacer * 36 !default;
$chat-inline-maxheight: 90vh !default;

// CHAT SUGGESTION
$chat-suggestions-maxheight: $spacer * 16 !default;

// VIEWPORT SIZES
$viewport-width: 100vw !default;
$viewport-height: 100vh !default;

// ICON SIZES
$iconsize-small: 16px !default;
$iconsize: 24px !default;
$iconsize-large: 32px !default;

// BUTTON SIZED
$buttonsize-small: 32px !default;
$buttonsize: 40px !default;

// AVATAR SIZES
$avatarsize: 32px !default;
$avatarsize-large: 48px !default;

// DIVIDER
$dividersize: 32px !default;

// MESSAGE COUNT
/* stylelint-disable-next-line prettier/prettier */
$messagecountsize: calc($spacer * 1.25);

// Z-INDEX
$z-index: 1 !default;

// BOX SHADOWS
/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
$boxshadow:
  0 $spacer * 0.25 $spacer * 1.5 hsl(204deg 26% 28% / 15%),
  0 $spacer * 0.15 $spacer * 0.5 hsl(204deg 26% 28% / 20%) !default;
$boxshadow-soft: 0 0 $spacer 0 rgba($black, 0.1) !default;

// TRANSITIONS
$transition: 0.3s ease !default;
$transition-delay: 0.3s 0.2s ease !default;
$transition-slow: 0.6s ease !default;

// BREAKPOINTS
$breakpoints: (
  phablet: 480px,
  phablet-l: 640px,
  tablet: 767px,
  desktop: 1024px,
  desktop-l: 1200px,
);