@import "./_vals.scss";

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$background:false !default;
$on-background:false !default;
$primary: var(--primary) !default;
$on-primary: var(--on-primary) !default;

$secondary: var(--secondary) !default;
$on-secondary: var(--on-secondary) !default;

$error: var(--error) !default;
$on-error: var(--on-error) !default;

$button-color: #CCCCCC !default;

@if $background==false or $on-background==false {
    @error("background and on-background must be set!");
}

:root {
    --background: $background;
    --on-background: $on-background;
}

$default-font-size: 1.2rem;

.background-default {
    background: $background;
}

* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: $default-font-size;

    transition: .2s ease-in-out;
    transition-property: color, background-color;
}

html,
body {
    background: $background;
    color: $on-background;
    margin: 0;
    min-height: 100vh;
    min-width: 100vw;
}

@each $dp in $elevations {
    .elv-#{$dp} {
        @include Elevation($dp);
    }
}

.margin {
    margin-bottom: 1.5rem;
}

.container {
    box-sizing: content-box;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 auto;
    max-width: 50rem;
}

@function darken-brighten-color($color, $val) {
    @if (lightness($color) > 50) {
        @return darken($color, $val); // Lighter backgorund, return dark color
    }

    @else {
        @return lighten($color, $val); // Darker background, return light color
    }
}

@import "./_btn.scss";
@import "./_modal.scss";
@import "./_input.scss";
@import "./_list.scss";
@import "./_header.scss";
@import "./_card.scss";