/*
 * @NOTE: Prepend a `~` to css file paths that are in your node_modules
 *        See https://github.com/webpack-contrib/sass-loader#imports
 */
@use 'sass:map';

// see https://bootswatch.com/
@import "bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Needed for accordions
@import "bootstrap/scss/transitions";


// 4. Include any optional Bootstrap components as you like
@import "bootstrap/scss/accordion";
.accordion-header {
    margin-bottom: 0;
    margin-top: 0;
}
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";

@import "bootstrap/scss/modal";
.modal-content {
    color: black;
}


// TODO: Pretty hacky. I think <pre><code> stuff got mixed up
// with the whole Tailwind-Bootstrap situation. For now, we
// always use <span className="pre"> when we need an inline monospace,
// and <pre><code> for a block display.
.pre {
    font-family: "Space Mono", monospace;
}
pre {
    background-color: rgb(24, 29, 37);
    font-family: "Space Mono", monospace;
}
code {
    border-width: 0px !important;
    font-family: "Space Mono", monospace;
}

.accordion-flush .accordion-item .accordion-button {
    padding: 2px 15px;
}

// Import all of bootstrap, this isn't an exercise in minimisation
// @import "bootstrap/scss/bootstrap";
