@use '../library/all' as *;

@include normalizePlusReset();
@include pageEmEquivalent(10);

//--------------------------------------------------------------
// Main layout
//--------------------------------------------------------------
html,
body {

    min-height: 100%;

    @include mediaMinWidth($breakpointMedium) {
        background-color: $colorPageBackground;
    }

}

a {
    color: $colorMain1;
}

body {

    @include fontSansCondensed;
    min-width: 32em; position: relative;
    color: $colorGrayDark1;
    overflow-x: hidden;

}

.appContainer {

    position: relative; min-height: 100vh; box-sizing: border-box;

    @include mediaMaxWidth($breakpointMedium) {
        overflow-x: hidden;
    }

    @include mediaMinWidth($breakpointMedium) {

        padding: 5em 0 0 5em;

        &:before {

            position: absolute; content: ""; left: 0; top: 0; right: 0; height: 5em;
            background-color: #fff; border-bottom: 1px solid rgba(#000,0.12);

        }

    }

}

html {
    /* Works on Firefox */
    scrollbar-width: none;
    scrollbar-color: transparent;

    /* Works on Chrome, Edge, and Safari */
    &::-webkit-scrollbar {
        width: 0; height: 0;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #000;
        border-radius: 10px;
        border: 3px solid transparent;
        background-clip: content-box;
    }
}

//--------------------------------------------------------------
// Helper classes
//--------------------------------------------------------------
.cf { @include clearfix; }
.nBtn { @include normalizeButton; }
.icr { @include iconReplacement; }
.hidden { display: none !important; }

//--------------------------------------------------------------
// Overrides
//--------------------------------------------------------------
.slbOverlay { z-index: 10010; }
.slbWrapOuter { z-index: 10020; }