@import "base";

/////
// Vendor stuff

@import "vendor/bootstrap";
@import "vendor/materialize";
@import "../../node_modules/sass-material-colors/sass/sass-material-colors-classes";
@import "../../node_modules/pretty-checkbox/src/pretty.scss";


body {
    background: $bg;
}

/////
// Custom styles
// Layout
@import "layout/page";
@import "layout/header";
@import "layout/sidebar";
@import "layout/content";
@import "layout/footer";


// Components
@import "compontents/fonts";
@import "compontents/typography";
@import "compontents/loader";
@import "compontents/tooltip";
@import "compontents/transitions";
@import "compontents/animations";
@import "compontents/side-nav";
@import "compontents/nprogress";
@import "compontents/scroll-to-top";
@import "compontents/navs";
@import "compontents/context-menu";
@import "compontents/document";
@import "compontents/util";


.btn-secondary {
    @include button-variant(#ffffff, $color-codex-alt, $color-codex-alt);
}
.btn-dark {
    @include button-variant($section-variant-dark-fg, $section-variant-dark-bg, $section-variant-dark-bg);
}
.btn-light {
    @include button-variant($section-variant-light-fg, $section-variant-light-bg, $section-variant-light-bg);
}


.scrollable {
    overflow-y: scroll;
    &::-webkit-scrollbar-track {
        //-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
        background-color: #ffffff;
    }

    &::-webkit-scrollbar {
        width: 6px;
        background-color: #333333;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #666666;
    }
}

.scrollable-x {
    overflow-x: scroll;
}

[v-cloak] { display: none }