$breakpointTiny: 420px;
$breakpointXSmall: 588px;
$breakpointSmall: 768px;
$breakpointMedium: 976px;
$breakpointLarge: 1024px;
$breakpointWide: 1280px;
$breakpointBig: 1440px;

$topBar: 39px;
$contentHeaderSpacer: 52px;
$toolbarWidth: 80px;
$toolbarOpenWidth: 240px;
$subToolbarWidth: 260px;
$sidebarSmallWidth: 300px;
$sidebarWidth: 360px;

$borderSmall: 4px;
$borderDefault: 6px;
$borderMedium: 8px;
$borderBig: 12px;

$iconFill: '787878';
$iconActiveFill: '003cc5';

$basic-easing: cubic-bezier(.455, .03, .515, .955);
$fancy-easing: cubic-bezier(.19, 1, .22, 1);
$transition: .15s $fancy-easing;
$transition--fast: .3s $fancy-easing;

$colorAppBackground: #fbfbff; //#f5f7fb;
$colorAppBackgroundShadow: #f5f5f9;
$colorDarkAppBackground: #1B1B1D;
$primary: #0550e6; //0136fd;
$primaryDark: #080090;

$mixColor: $primary;

$primaryHover: mix(black, $primary, 15%);
$primaryActive: mix(black, $primary, 25%);

$arg-card-metadata-color: #777;

$argue-accent-color: #0550e6;
$argue-add-link-color: $argue-accent-color;

// Chips
$argue-chip-bg-color: #fff;
$argue-chip-font-color: #a2c;
$argue-chip-hover-bg-color: #fff2ff;
$argue-chip-hover-font-color: #a2c;

// Comment
$arg-comment-text-meta-color: $arg-card-metadata-color;
$comment-border-color: rgba(0, 0, 0, .0625);

// List
$arg-list-avatar-bg: #F2F2F2;
$argue-list-item-secondary-text-color: #666;

// Typo
$arg-typo-font-family: Roboto, sans-serif;

$arg-typo-h1-font-family: $arg-typo-font-family;
$arg-typo-h1-font-size: 6rem;
$arg-typo-h1-line-height: 6rem;
$arg-typo-h1-font-weight: 300;
$arg-typo-h1-letter-spacing: -0.015625em;

$arg-typo-h2-font-family: $arg-typo-font-family;
$arg-typo-h2-font-size: 3.75rem;
$arg-typo-h2-line-height: 3.75rem;
$arg-typo-h2-font-weight: 300;
$arg-typo-h2-letter-spacing: -0.0083333333em;

$arg-typo-h3-font-family: $arg-typo-font-family;
$arg-typo-h3-font-size: 3rem;
$arg-typo-h3-line-height: 3.125rem;
$arg-typo-h3-font-weight: 400;
$arg-typo-h3-letter-spacing: normal;

$arg-typo-h4-font-family: $arg-typo-font-family;
$arg-typo-h4-font-size: 2.125rem;
$arg-typo-h4-line-height: 2.5rem;
$arg-typo-h4-font-weight: 400;
$arg-typo-h4-letter-spacing: 0.0073529412em;

$arg-typo-h5-font-family: $arg-typo-font-family;
$arg-typo-h5-font-size: 1.5rem;
$arg-typo-h5-line-height: 2rem;
$arg-typo-h5-font-weight: 400;
$arg-typo-h5-letter-spacing: normal;

$arg-typo-h6-font-family: $arg-typo-font-family;
$arg-typo-h6-font-size: 1.25rem;
$arg-typo-h6-line-height: 2rem;
$arg-typo-h6-font-weight: 500;
$arg-typo-h6-letter-spacing: 0.0125em;

$arg-typo-subtitle1-font-family: $arg-typo-font-family;
$arg-typo-subtitle1-font-size: 1rem;
$arg-typo-subtitle1-line-height: 1.75rem;
$arg-typo-subtitle1-font-weight: 400;
$arg-typo-subtitle1-letter-spacing: 0.009375em;

$arg-typo-subtitle2-font-family: $arg-typo-font-family;
$arg-typo-subtitle2-font-size: 0.875rem;
$arg-typo-subtitle2-line-height: 1.375rem;
$arg-typo-subtitle2-font-weight: 500;
$arg-typo-subtitle2-letter-spacing: 0.0071428571em;

$arg-typo-body1-font-family: $arg-typo-font-family;
$arg-typo-body1-font-size: 1rem;
$arg-typo-body1-line-height: 1.5rem;
$arg-typo-body1-font-weight: 400;
$arg-typo-body1-letter-spacing: 0.03125em;

$arg-typo-body2-font-family: $arg-typo-font-family;
$arg-typo-body2-font-size: 0.875rem;
$arg-typo-body2-line-height: 1.25rem;
$arg-typo-body2-font-weight: 400;
$arg-typo-body2-letter-spacing: 0.0178571429em;

$arg-typo-caption-font-family: $arg-typo-font-family;
$arg-typo-caption-font-size: 0.75rem;
$arg-typo-caption-line-height: 1.25rem;
$arg-typo-caption-font-weight: 400;
$arg-typo-caption-letter-spacing: 0.0333333333em;

$arg-typo-button-font-family: $arg-typo-font-family;
$arg-typo-button-font-size: 0.875rem;
$arg-typo-button-line-height: 2.25rem;
$arg-typo-button-font-weight: 500;
$arg-typo-button-letter-spacing: 0.0892857143em;

$arg-typo-overline-font-family: $arg-typo-font-family;
$arg-typo-overline-font-size: 0.75rem;
$arg-typo-overline-line-height: 2rem;
$arg-typo-overline-font-weight: 500;
$arg-typo-overline-letter-spacing: 0.1666666667em;
$arg-typo-overline-text-transform: uppercase;

// Card
$arg-card-border-size: 1px;
$arg-card-border-color: rgba(212, 212, 218, 0.8);
$arg-card-border-radius-size: 2px;
$arg-card-bg-color: #fff;
$arg-card-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
$arg-card-header-icon-bg-on-card: rgba(0,0,0,.3);

// Drop menu
$drop-menu-list-bg-color: #FFF;
$drop-menu-list-border-radius-size: $arg-card-border-radius-size;
$drop-menu-list-box-shadow: $arg-card-box-shadow;
$drop-menu-list-border-size: $arg-card-border-size;
$drop-menu-list-border-color: $arg-card-border-color;
$drop-menu-item-bg-active-color: rgba(0,0,0, .1875);
$drop-menu-item-bg-hover-color: rgba(0,0,0, .0625);

// FAB - Floating Action Button
$argue-fab-accent-bg-color: rgba($argue-accent-color, .0875);

// Elevation
$elevation1: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;
$elevation2: 0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;
$elevation3: 0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;
$elevation4: 0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;
$elevation5: 0 3px 5px -1px #0003,0 5px 8px #00000024,0 1px 14px #0000001f;
$elevation6: 0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;
$elevation7: 0 4px 5px -2px #0003,0 7px 10px 1px #00000024,0 2px 16px 1px #0000001f;
$elevation8: 0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;
