/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import './colors.css';
@import './helpers.css';

@custom-media --smaller (width < 500px);
@custom-media --small (width < 800px);
@custom-media --medium (width < 1100px);

:root {
  --font-apple: -apple-system, 'BlinkMacSystemFont';
  --font-fallback: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --default-font-family: var(--font-apple), var(--font-fallback),
    var(--font-emoji);
  --code-font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
    'Fira Mono', 'Droid Sans Mono', 'Consolas', 'Roboto Mono', 'Source Code Pro',
    monospace;

  /* Sizes */
  --default-background-color: #fff;
  --default-font-size-small: 14px;
  --default-font-size: 16px;
  --default-font-size-large: 18px;
  --default-font-color: #000;
  --default-font-color-light: color-mod(
    var(--default-font-color) blend(var(--default-background-color) 50%)
  );
  --default-line-height-small: 1.25;
  --default-line-height: 1.5;
  --default-line-height-large: 2;
  --default-padding-small: 10px;
  --default-padding: 16px;
  --default-padding-large: 20px;
  --default-border-radius-small: 3px;
  --default-border-radius: 4px;
  --default-transition-duration: 150ms;
  --default-recent-item-font-size: 14px;

  /* Layout */
  --layout-min-width: 1120px;
  --layout-min-height: 450px;
  --layout-sidebar-width: 270px;
  --layout-activity-width: 320px;

  /* Layers */
  --z-index-dropdown: 1000;
  --z-index-tooltip: calc(var(--z-index-dropdown) + 10);
  --z-index-call: calc(var(--z-index-dropdown) - 20);
  --z-index-sidebar: 50;
  --z-index-chat: 20;
  --z-index-toolbar: calc(var(--z-index-chat) + 5);
  --z-index-sidebar-unread: 20;
  --z-index-connection-status: calc(var(--z-index-toolbar) - 1);
  --z-index-message-actions: 10;
  --z-index-dragndrop: 2000;
  --z-index-input: 100;
  --z-index-overlay: 1500;

  /* Colors */
  --color-primary: var(--violet-blue);
  --color-success: var(--medium-green);
  --color-danger: var(--lipstick);
  --color-info: var(--dark-periwinkle);
  --color-warning: var(--orange-yellow);
  --color-pending: var(--color-info);
  --color-error: var(--color-danger);
  --color-labels: var(--dark-grey);

  /* Gradients */
  --default-gradient: linear-gradient(
    89deg,
    var(--violet-blue),
    var(--color-primary)
  );
  --login-gradient: var(--default-gradient);
  --login-background: var(--login-gradient);
}