@import '_material-shadows';

$dark-theme-bg-darker: rgb(39, 39, 39);
$dark-theme-bg-lighter: rgb(70, 70, 70);
$dark-theme-bg: rgb(48, 48, 48);
$dark-theme-text-color: #777777;
$dark-theme-text-color-lighter: #bdbdbd;

$light-theme-text-color: #333333;
$light-theme-bg: rgb(244, 244, 244);

$dark-green: #30412d;
$green: #4fa758;
$light-green: #a9ed9f;
$red: #e15d63;
$red-danger: #e11826;
$yellow: #fff400;
$c-accent: rgb(197, 17, 98);

$component-max-width: 900px;

$layout-xs: 600px;
$layout-gt-xs: 600px;
//$layout-sm: 960px;
$layout-gt-sm: 960px;
//$layout-md: 1280px;
$layout-gt-md: 1280px;
//$layout-lg: 1920px;
$layout-gt-lg: 1920px;
//$layout-xl: 1920px;

$shadow-bottom: 0 10px 6px -6px rgba(0, 0, 0, .3);
$shadow-bottom-boxed: #{$shadow-bottom}, 0 0 1px rgba(0, 0, 0, .3);
$shadow-icon-button: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
$shadow-edit-on-click: $whiteframe-shadow-13dp;

// https://github.com/material-components/material-components-web/blob/master/packages/mdc-animation/_variables.scss
$ani-standard-timing: cubic-bezier(.4, 0, .2, 1) !default;
$ani-enter-timing: cubic-bezier(0, 0, .2, 1) !default;
$ani-leave-timing: cubic-bezier(.4, 0, 1, 1) !default;
$ani-sharp-timing: cubic-bezier(.4, 0, .6, 1) !default;

$ease-in-out-quint: cubic-bezier(.38, .04, .35, .96);
$transition-duration-s: 150ms;
$transition-duration-m: 225ms;
$transition-duration-l: 375ms;

$transition-duration--enter: $transition-duration-m;
$transition-duration--leave: 195ms;

$transition-enter: $transition-duration--enter $ani-enter-timing;
$transition-leave: $transition-duration--leave $ani-leave-timing;
$transition-standard: $transition-duration-m $ani-standard-timing;

$page-transition-duration: $transition-duration-m;
