base.scss

@import "2fa-setup";
@import "all-json-and-csv-data";
@import "navigation";
@import "study-fields";
@import "superuser";

// Add imports to adjust default colors and theme maps
@import "bootstrap-5.2.0/scss/functions";
@import "custom-variables";
@import "bootstrap-5.2.0/scss/variables";
@import "custom-maps";

// import study-responses after custom variables because it uses a color variable
@import "study-responses";

// Add all bootstrap features
@import "bootstrap-5.2.0/scss/bootstrap";


.empty-text {
    @extend .my-4, .mx-auto, .text-center, .fst-italic;
}

.search-bar {
    @extend .mx-5, .row;
}

.subheading {
    @extend .border-bottom, .pb-2, .pt-4, .mb-4, .mx-4;
}

// Change title/subtitle font sizes across breakpoints on the home page.
// Font size classes do not support the breakpoint infixes (fs-sm-1, etc.).
// Ideally these would @extend existing font size (fs-*) classes, but it's not
// possible to use extend in media queries.

// Screen widths xs to lg
.home-title-text {
    font-size: calc(1.325rem + 0.9vw) !important;  // fs-2
}

.home-subtitle-text {
    font-size: calc(1.275rem + 0.3vw) !important; // fs-4
}

// Screen widths xl and xxl
@include media-breakpoint-up(xl) {
    .home-title-text {
        font-size: calc(1.375rem + 1.5vw) !important;  // fs-1
    }

    .home-subtitle-text {
        font-size: calc(1.3rem + 0.6vw) !important; // fs-3
    }
}

.img-hover:hover, .img-hover:focus {
    color: #636464;
    background-color: #e5e5e5;
}

.img-hover:active {
    color: #fff;
    background-color: #636464;
    border-color: #636464;
}

// Darker border around checkbox
[type="checkbox"].dark-checkbox-border {
    border-color: black;
}