@import "base/mixins";
@import "variables";


:root {
    @include generate(color, $pallete);
    --container-padding: 2rem;
    --container-max-width: 1140px;
    font-size: var(--rem-value, 10px); // easy 'rem' using. no calculations
    font-family: var(--font-primary);
    scroll-behavior: smooth;

    @include breakpoint-down('lg') {
        --container-max-width: 94%;
        --container-padding: 10px;
    }

    @include breakpoint-down('sm') {
        --container-max-width: 85%;
        --container-padding: 27px;
    }

    --rem-value: 12px;
}

:root {
    --font-primary: 'Proxima Nova', sans-serif;
    --typo-headline: 57px;
    --typo-headline1: 4rem;
    --typo-headline2: 2.4rem;
    --typo-headline3: 24px;
    --typo-subtitle: 20px;
    --typo-base: 1.6rem;
    --typo-caption: 1.2rem;
    --shadow-1: 0 0 .8rem 0px rgba(0, 0, 0, 0.2);
    --shadow-2: 0 1.2rem 1.2rem rgba(118, 132, 144, 0.15);

    @include breakpoint-up('lg') {
        --typo-headline: 67px;
        --typo-headline1: 6rem;
        --typo-headline2: 4.2rem;
        --typo-headline3: 24px;
        --typo-caption: 14px;
    }
}

body {
    background-color: var(--color-app-background);
    font-size: var(--typo-base);
    color: var(--color-text-primary);
    overflow-x: hidden;
}

.container {
    @include as-container();

    &--vacancy {
        padding: 0;

        @include breakpoint-down('lg') {
            max-width: none;
        }
    }
}

.app-inner {
    display: flex;
    flex-flow: column;
    min-height: 100%;

    &--overflow-hidden {
        overflow: hidden;
    }
}

.app-content {
    flex: 1;
}