/* Breakpoints
 *
 * Important: Remember to keep Sass breakpoints in sync with Tailwind
 * breakpoints in tailwind.config.js!
 *
 * Mappy Breakpoints expects breakpoints in `px` and does automatic
 * conversion to `em` while Tailwind uses the configured values literally.
 */

$breakpoints: (
    'xs': 480px,  // 30rem
    'sm': 640px,  // 40rem
    'md': 768px,  // 48rem
    'lg': 1024px,  // 64rem
    'xl': 1200px, // 75rem
);

// Timing
$transition-time--short: .2s;
$transition-time: .3s;
$transition-time--long: .4s;

$shadow--small: 0 0 5px rgba(12, 12, 13, .1);
$shadow--bottom-inset: inset 0 -4px 8px rgba(12, 12, 13, .03);
$shadow--right-inset: inset -4px 0 8px rgba(12, 12, 13, .03);

$font--main: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
$font--notes: $font--main;
// stylelint-disable-next-line value-keyword-case
$font--code: Consolas, 'Liberation Mono', Menlo, Courier, monospace;

$border-width: 2px;
$border-style: solid;

$whitespace-scale: 1; // good range: 0.8 - 1.2
$whitespace-base: 30px;

$ruler-size: 37px; // needs to be the size specified as 'rulerHeight' when initializing the ruler in fabricator.js + 2px

$toolbar_height: 55px;

$color-button--background: transparent;
$color-button--background-active: rgba(0, 0, 0, .02);
$color-button--border: #eaeaea;

// Header
$header-height: 5rem;
$header-height--desktop: 6.5rem;

// Box-shadow
$box-shadow-basic: 0 .5rem 1rem rgba(0, 0, 0, .2);
