$enable-responsive-font-sizes: true;
@import './node_modules/bootstrap/scss/bootstrap';
@import './node_modules/tippy.js/dist/tippy';
@import './node_modules/tippy.js/themes/light-border';

.tippy-box[data-theme~='bootstrap'] {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0px 5px -3px var(--bs-tertiary-color);
    border: 1px solid var(--bs-border-color);
}
.tippy-box[data-theme~='bootstrap'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--bs-body-color);
}
.tippy-box[data-theme~='bootstrap'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--bs-body-color);
}
.tippy-box[data-theme~='bootstrap'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--bs-body-color);
}
.tippy-box[data-theme~='bootstrap'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--bs-body-color);
}

// avoid the toggle button color change
#dark-mode-label {
    background-color:initial;
}

a {
    text-decoration: none;
}

:root {
    --bs-font-sans-serif: 'Roboto',sans-serif;
    font-size: 15px;
}

.text-version {
    word-break: break-word;
}

.file-list {
    max-height: 700px;
    overflow: auto;
}

.copyable {
    display: flex;
    align-items: center;
    width: max-content;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

.copyable .btn {
    border: none;
    border-left: 1px solid var(--bs-border-color);
    border-radius: 0;
}

.copyable pre {
    margin: 0;
    padding: 0 1em;
    overflow-x: auto;
}

.copyable .highlight code::before {
    color: teal;
    display: inline;
    content: "$ ";
}

body {
  padding-top: 4.45rem;
}

.navbar {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5em 1em;
}

.nav hr, .navbar hr {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    opacity: 0.1;
}

.container-fluid .nav .nav-link {
    color: var(--bs-tertiary-color);
}

.container-fluid .nav .nav-link.active {
    color: var(--bs-emphasis-color);
}

.sticky-top {
    top: 5rem;
}

@include media-breakpoint-down(xxl) {
    .container-xl {
        max-width: 1320px;
    }
}

@include media-breakpoint-down(xl) {
    :root {
        font-size: 14px;
    }
}

@include media-breakpoint-down(md) {
    :root {
        font-size: 13px;
    }
}

@include media-breakpoint-down(sm) {
    :root {
        font-size: 12px;
    }
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
         url('fonts/roboto-latin-400-normal.woff2') format('woff2'),
         url('fonts/roboto-latin-400-normal.woff') format('woff');
  }

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'),
            url('fonts/roboto-latin-700-normal.woff2') format('woff2'),
            url('fonts/roboto-latin-700-normal.woff') format('woff');
}