@import '../lib/index.scss';
@import 'test-config.scss';
@include init;

html {
    background-color: color('bg', 'dark');
    line-height: ($base-line-height/$base-font-size);
    color: color('type');
    font-family: 'Asap', sans-serif;
    @include interpolate(
        'font-size',
        $min-screen: ems(600px, 16px),
        $min-value: ems(12px, 16px),
        $max-screen: ems(1200px, 16px),
        $max-value: ems(28px, 16px),
        $easing: 'ease-in'
    );
}

body {
    min-height: 100vh;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: inherit;
    font-size: inherit;
}

.wrap {
    margin: 0 auto;
    background-color: color('bg');
    padding: type-space(1 2);
    width: 95%;
    max-width: $max-site-width;
}

hr {
    margin: type-space(1 0);
    outline: 1px solid currentColor;
    border: 0;
    height: 0px;
}

@include headings(1, 6) {
    font-family: $primary-font-stack;
}

h1 {
    line-height: $type-h1-lh;
    color: color('type', light);
    font-size: rems($type-h1-size);

    sup {
        line-height: 0;
    }
}

h2 {
    @include fs($type-h2-size, true);
}

h3 {
    @include fs($type-h3-size, true);
}

h4 {
    @include fs($type-h4-size, true);
}

h5 {
    @include fs($type-h5-size, true);
}

h6 {
    @include fs($type-h6-size, false);
    line-height: $h6-lh;
}

.web-font {
    font-family: 'Asap', sans-serif;
}

.grid_item {
    outline: 1px solid black;
}

.grid-type:before {
    content: "#{if($grid-bem-naming, 'BEM-style grid', 'Snake-style Grid')}";
    @include fs($type-small-size);
}

$type-baseline-size: strip-units($base-line-height);

.baseline-on {
    background-image: url(http://basehold.it/i/#{$type-baseline-size});
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            rgba(black, 0.15) 1px,
            transparent 1px
        )
        top left / auto (($type-p-lh / 2) * 1rem);
}

// .align-top {
//     align-items: flex-start;
// }

.box {
    align-self: flex-start;
    margin-right: -1px;
    border: 1px solid rgba(color('type'), 0.5);

    > * {
        border: 1px solid;
    }
}

@include web-fonts;
//@include grid-init;