//
// Screen sizes
//
$max-width-mobile: 750px;
$max-width-desktop-small: 1000px;

$topbar-height: 56px;
$bottombar-height: 36px;
$nodetoolbar-height: 145px;

$sidebar-width: 500px;
$sidebar-item-height: 400px;

$total-screen-width: $sidebar-width + $max-width-mobile;

//
// COLORS
//
$primary-color: #1976D2;
$primary-dark-color: #303f9f;
$accent-color: #ff5722;
$light-accent-color: lighten($accent-color, 10%);
$accent2-color: #FF9800;
$secondary-text-color: #C6C6C6;
$success-color: green;
$error-color: #700;

$background-grey-light: rgba(235, 235, 235, 1);
$background-content: white;

$node-subject-color: #EDEFF0;
$node-subject-stroke: #D6DADC;

$abstractionSidebar-heading-background: black;
$abstractionSidebar-background: #21252B;

$container-border: 2px solid #ddd;

//
// Main containers
//
.appContainer {
    height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    // align-items: stretch;
    margin-top: $topbar-height;

    position: relative;

    min-width: 320px;
}

.contentContainer {
    height: 100%;
    flex-grow: 1;
    background-color: $background-content;

    display: flex;
    flex-direction: column;

    padding: 0 25px;

    position: relative;
}

.contentContainer-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

@media only screen and (max-width: $max-width-mobile + 32px) {
    .contentContainer-inner {
        width: 100%;
    }
}

@media only screen and (min-width: $max-width-mobile + 32px) {
    .contentContainer-inner {
        max-width: $max-width-mobile;
        width: 100%;
        margin: 16px auto 0;
    }
}

//
// FONTS
//

$font-family-text: source-sans-pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-display: source-serif-pro, Georgia, "Times New Roman", Times, serif;
$font-family-code: source-code-pro, Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

//
// Remove default styling
//
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    border: none;
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    // font: 16px/1 sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
    height: 100%;

    font-family: $font-family-text;
}
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
    margin: 0;
    padding: 0;
}
main,
li {
    display: block;
}
h1,
h2,
h3,
h4 {
    font-size: inherit;
    font-family: $font-family-text;
}
strong {
    font-weight: bold;
}
a,
button {
    // color: inherit;
    transition: .3s;
}
a {
    text-decoration: none;
}
button {
    overflow: visible;
    border: 0;
    font: inherit;
    -webkit-font-smoothing: inherit;
    letter-spacing: inherit;
    background: none;
    cursor: pointer;
}
::-moz-focus-inner {
    padding: 0;
    border: 0;
}
:focus {
    outline: 0;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

//
// FOUNDATION
//

// 1. Global
// ---------

$global-font-size: 100%;
$global-width: rem-calc(1600);
$global-lineheight: 1.4;

// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoint-classes: (small medium large xlarge xxlarge);

// 3. The Grid
// -----------

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-responsive-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$block-grid-max: 8;
