/* control page width ====================================================== */

.row>main {
  // Ensure contents never become unreadably wide
  max-width: 50rem;
}

// break and hypenate very long words on small screens
@include media-breakpoint-down(md) {
  .row>main {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

// Put extra space between content and navbar
@include media-breakpoint-only(xl) {
  .container .row {
    justify-content: space-evenly;
  }
}

// Boost font size and give big (but not infinite) margin on sidebar
@include media-breakpoint-up(xxl) {
  body {
    font-size: 18px
  }

  .col-md-3 {
    margin-left: 5rem;
  }
}

/* navbar =================================================================== */

// pkgdown will follow bslib navbar variables by default
$navbar-bg: null !default;
$navbar-light-bg: if($navbar-bg, $navbar-bg, null) !default;
$navbar-dark-bg: if($navbar-bg, $navbar-bg, null) !default;

$pkgdown-navbar-bg: if($navbar-light-bg, $navbar-light-bg, null) !default;
$pkgdown-navbar-bg-dark: if($navbar-dark-bg, $navbar-dark-bg, null) !default;

// BS navbars appears to be designed with the idea that you have a coloured
// navbar that looks the same in both light and dark mode. We prefer a mildly
// coloured navbar that's just different enough from the body to stand out.
//
// Relies on CSS fallback rules
.navbar {
  background: RGBA(var(--bs-body-color-rgb), 0.1);
  background: color-mix(in oklab, color-mix(in oklab, var(--bs-body-bg) 95%, var(--bs-primary)) 95%, var(--bs-body-color));
  background: $pkgdown-navbar-bg;
  // Harmonize alignment of navbar elements (search field vs. rest)
  line-height: initial;
}

[data-bs-theme="dark"] .navbar {
  background: $pkgdown-navbar-bg-dark;
}

// make both the active nav and the hovered nav more clear by mixing the
// background colour with the body and primary colours respectively
.nav-item .nav-link {
  @include border-radius($border-radius);
}

.nav-item.active .nav-link {
  background: RGBA(var(--bs-body-color-rgb), 0.1);
}

.nav-item .nav-link:hover {
  background: RGBA(var(--bs-primary-rgb), 0.1);
}

// Align baselines of package name, version, and nav items
.navbar>.container {
  align-items: baseline;
  -webkit-align-items: baseline;
}

// Make search a little narrower than the default
input[type="search"] {
  width: 12rem;
}

[aria-labelledby=dropdown-lightswitch] span.fa {
  opacity: 0.5;
}

// When navbar is a dropdown:
@include media-breakpoint-down(lg) {

  // Make search and sub-menus span full width
  .algolia-autocomplete,
  input[type="search"],
  #navbar .dropdown-menu {
    width: 100%;
  }

  // Allow text to wrap
  #navbar .dropdown-item {
    white-space: normal;
  }

  // Add a little margin
  input[type="search"] {
    margin: 0.25rem 0;
  }
}

// make long dropdown menus scrollable
.dropdown-menu {
  max-height: 280px;
  overflow-y: auto;
}

/* headroom.js -------------------------------------------------------------- */

.headroom {
  will-change: transform;
  transition: transform 400ms ease;
}

.headroom--pinned {
  transform: translateY(0%);
}

.headroom--unpinned {
  transform: translateY(-100%);
}

// Need to adjust body components down by height of navbar so it
// doesn't overlap them when visible
$pkgdown-nav-height: 56px !default;

.row>main,
.row>aside {
  margin-top: $pkgdown-nav-height;
}

html,
body {
  scroll-padding: $pkgdown-nav-height
}

// Make scrollable, sticky TOC
@include media-breakpoint-up(sm) {
  #toc {
    position: sticky;
    top: $pkgdown-nav-height;
    max-height: calc(100vh - #{$pkgdown-nav-height} - 1rem);
    overflow-y: auto;
  }
}

/* sidebar ================================================================== */

aside {
  h2 {
    margin-top: 1.5rem;
    font-size: $font-size-lg;
  }

  .roles {
    color: RGBA(var(--bs-body-color-rgb), 0.8);
  }

  .list-unstyled li {
    margin-bottom: 0.5rem;
  }

  .dev-status .list-unstyled li {
    margin-bottom: 0.1rem;
  }
}

// Add some visual distinction between content and "sidebar" on mobile
@include media-breakpoint-down(md) {

  // Additional specificity needed to override bootstrap width on .row > *
  .row>aside {
    margin: 0.5rem;
    width: calc(100vw - 1rem);
    background-color: RGBA(var(--bs-body-color-rgb), 0.1);
    border-color: var(--bs-border-color);
    @include border-radius($border-radius);

    h2:first-child {
      margin-top: 1rem;
    }
  }
}

/* table of contents -------------------------------------------------------- */

// needed for scrollspy
body {
  position: relative;
}

#toc>.nav {
  margin-bottom: 1rem;

  a.nav-link {
    color: inherit;
    padding: 0.25rem 0.5rem;
    margin-bottom: 2px;
    @include border-radius($border-radius);

    &:hover,
    &:focus {
      background-color: RGBA(var(--bs-primary-rgb), 0.1);
    }

    &.active {
      background-color: RGBA(var(--bs-body-color-rgb), 0.1);
    }
  }

  // Nested headings are indented
  .nav a.nav-link {
    margin-left: 0.5rem;
  }

  // Only show second level if active.
  // Requires !important because that's how BS5 sets display: flex
  .nav {
    display: none !important;
  }

  a.active+.nav {
    display: flex !important;
  }
}

/* footer  ================================================================== */

$pkgdown-footer-color: RGBA(var(--bs-body-color-rgb), 0.8) !default;
$pkgdown-footer-bg: transparent !default;
$pkgdown-footer-border-color: $border-color !default;
$pkgdown-footer-border-width: $border-width !default;

footer {
  margin: 1rem 0 1rem 0;
  padding-top: 1rem;
  font-size: .875em;
  border-top: $pkgdown-footer-border-width solid $pkgdown-footer-border-color;
  background: $pkgdown-footer-bg;
  color: $pkgdown-footer-color;
  display: flex;
  column-gap: 1rem;
}

@include media-breakpoint-down(sm) {
  footer {
    flex-direction: column;
  }
}

@include media-breakpoint-up(sm) {
  footer .pkgdown-footer-right {
    text-align: right;
  }
}

footer div {
  flex: 1 1 auto;
}

// "Sticky" footer - i.e. the footer always hugs the bottom of the viewport
// even for short pages.
//
// Basic idea: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
// Details: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

// Need .container and __all parents__ have height set to 100%
html,
body {
  height: 100%;
}

body>.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

body>.container .row {
  flex: 1 0 auto;
}

/* General typography ======================================================= */

// Ensure in-page images don't run outside their container
main img {
  max-width: 100%;
  height: auto;
}

main table {
  display: block;
  overflow: auto;
}

// avoid flash of invisible text + flash of unstyled text
body {
  font-display: fallback;
}

// page header
.page-header {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}

// spacing tweaks

// Use an indent for defintions rather than horitzonal space
dl {
  margin-bottom: 0;
}

dd {
  padding-left: 1.5rem;
  margin-bottom: 0.25rem
}

// Use margins rather than size to distinguish headings
h2,
.h2 {
  font-size: 1.75rem;
  margin-top: 1.5rem;
}

h3,
.h3 {
  font-size: 1.25rem;
  margin-top: 1rem;
  font-weight: bold;
}

h4,
.h4 {
  font-size: 1.1rem;
  font-weight: bold;
}

h5,
.h5 {
  font-size: 1rem;
  font-weight: bold;
}

summary {
  margin-bottom: 0.5rem;
}

details {
  margin-bottom: 1rem;
}

.html-widget {
  margin-bottom: 1rem;
}

// Section anchors
a.anchor {
  display: none;
  // style like a footnote
  margin-left: 2px;
  vertical-align: top;
  width: Min(0.9em, 20px);
  height: Min(0.9em, 20px);

  background-image: url(../../link.svg);
  background-repeat: no-repeat;
  background-size: Min(0.9em, 20px) Min(0.9em, 20px);
  background-position: center center;
}

h2,
h3,
h4,
h5,
h6,
dt {

  &:hover .anchor,
  &:target .anchor {
    display: inline-block;
  }
}

// Give targetted arguments some visual distinction
dt:target,
dt:target+dd {
  border-left: 0.25rem solid var(--bs-primary);
  margin-left: -0.75rem;
}

dt:target {
  padding-left: 0.5rem;
}

dt:target+dd {
  padding-left: 2rem;
}

// orcid badge
.orcid {
  color: #A6CE39;
  margin-right: 4px;
}

// ror badge
.ror {
  height: 16px;
  margin-right: 4px;
}

// activate font awesome
.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

// package logo
img.logo {
  float: right;
  width: 100px;
  margin-left: 30px;
}

.template-home img.logo {
  width: 120px;
}

@include media-breakpoint-down(sm) {
  img.logo {
    width: 80px;
  }
}

// line up h1 border-bottom with corner of hexagon
// values determined empirically
@include media-breakpoint-up(sm) {
  .page-header {
    min-height: 88px
  }

  .template-home .page-header {
    min-height: 104px
  }
}

// line-block produced by pandoc needs margin-bottom since it doesn't
// contain other tags
.line-block {
  margin-bottom: 1rem;
}

// Override bootstrap defaults that make sense in page bodies, but not on
// the reference index
.template-reference-index {
  dt {
    font-weight: normal;
  }

  // Don't allow breaking within a function name
  code {
    word-wrap: normal;
  }
}

.icon {
  float: right;

  img {
    width: 40px;
  }
}

// Ensure skip link is visible if focussed
a[href='#main'] {
  position: absolute;
  margin: 4px;
  padding: 0.75rem;
  background-color: var(--bs-body-bg);
  text-decoration: none;
  z-index: 2000;
}

.lifecycle {
  color: var(--bs-secondary-color);
  background-color: var(--bs-secondary-bg); // backup just in case we don't know the name
  border-radius: 5px;
}

.lifecycle-stable {
  background-color: rgb(16, 128, 1);
  color: var(--bs-white);
}

.lifecycle-superseded {
  background-color: rgb(7, 64, 128);
  color: var(--bs-white);
}

.lifecycle-experimental,
.lifecycle-deprecated {
  background-color: rgb(253, 128, 8);
  color: var(--bs-black);
}

/* Footnotes ---------------------------------------------------------------- */

a.footnote-ref {
  cursor: pointer;
}

// use "Min" to trigger computation in css, not sass
.popover {
  width: Min(100vw, 32rem);
  font-size: 0.9rem;
  box-shadow: 4px 4px 8px RGBA(var(--bs-body-color-rgb), 0.3);
}

.popover-body {
  padding: 0.75rem;
}

.popover-body p:last-child {
  margin-bottom: 0;
}

/* tabsets ------------------------------------------------------------------ */

.tab-content {
  padding: 1rem;
}

.tabset-pills .tab-content {
  border: solid 1px #e5e5e5;
}

// Make tab height consistent
// https://observablehq.com/@rkaravia/css-trick-tabs-with-consistent-height
.tab-content {
  display: flex;
}

.tab-content>.tab-pane {
  display: block;
  /* undo "display: none;" */
  visibility: hidden;
  margin-right: -100%;
  width: 100%;
}

.tab-content>.active {
  visibility: visible;
}

/* bibliography styling ----------------------------------------------------- */
// Added in pandoc 2.11: https://github.com/jgm/pandoc-templates/commit/9904bf71

div.csl-bib-body {}

div.csl-entry {
  clear: both;
}

.hanging-indent div.csl-entry {
  margin-left: 2em;
  text-indent: -2em;
}

div.csl-left-margin {
  min-width: 2em;
  float: left;
}

div.csl-right-inline {
  margin-left: 2em;
  padding-left: 1em;
}

div.csl-indent {
  margin-left: 2em;
}

/* code ===================================================================== */

pre,
pre code {
  // override bootstrap deafult that causes problems in old safari + IE
  // https://github.com/rstudio/shiny/issues/2233
  word-wrap: normal;
}

// Default dark mode styling does not look good for code
[data-bs-theme="dark"] {

  pre,
  code {
    background-color: RGBA(var(--bs-body-color-rgb), 0.1);
  }

  // don't double apply transparency
  pre code {
    background: transparent;
  }

}

code {
  // break long functions into multiple lines
  overflow-wrap: break-word;
}

// copy button
.hasCopyButton {
  position: relative;
}

.btn-copy-ex {
  position: absolute;
  right: 5px;
  top: 5px;
  visibility: hidden;
}

.hasCopyButton:hover button.btn-copy-ex {
  visibility: visible;
}

// Ensure there's enough space for the copy button
pre {
  padding: 0.75rem;
}

// Spacing tweaks for gt table
pre div.gt-table {
  white-space: normal;
  margin-top: 1rem;
}

// "Pop" code out of page margins on small screens to give a little more room
@include media-breakpoint-down(sm) {

  // div.section div.sourceCode pre
  // prevents matching <pre> inside (e.g.) a <li>
  div>div>pre {
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    border-radius: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .btn-copy-ex {
    right: calc(var(--bs-gutter-x) * -.5 + 5px);
  }
}

code a:any-link {
  color: inherit;
  text-decoration-color: RGBA(var(--bs-body-color-rgb), 0.6);
}

pre code {
  padding: 0;
  background: transparent;

  .error,
  .warning {
    font-weight: bolder;
  }
}

pre .img,
pre .r-plt {
  img {
    margin: 5px 0;
    background-color: #fff;
  }
}

// low-tech plot softening in dark mode
[data-bs-theme="dark"] pre img {
  opacity: 0.66;
  transition: opacity 250ms ease-in-out;

  &:hover,
  &:focus,
  &:active {
    opacity: 1;
  }
}

/* don't display links in code chunks when printing */
/* source: https://stackoverflow.com/a/10781533 */
@media print {

  code a:link:after,
  code a:visited:after {
    content: "";
  }
}

a.sourceLine:hover {
  text-decoration: none;
}

/* search =================================================================== */

mark {
  background: linear-gradient(-100deg,
      RGBA(var(--bs-info-rgb), 0.2),
      RGBA(var(--bs-info-rgb), 0.7) 95%,
      RGBA(var(--bs-info-rgb), 0.1))
}

// Mimic the style of the navbar dropdowns
.algolia-autocomplete .aa-dropdown-menu {
  margin-top: 0.5rem;
  padding: 0.5rem 0.25rem;
  width: MAX(100%, 20rem); // force computation in css, not sass
  max-height: 50vh;
  overflow-y: auto;

  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  @include border-radius($border-radius);

  .aa-suggestion {
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem 0.25rem;
    line-height: 1.3;

    &:hover {
      background-color: var(--bs-tertiary-bg);
      color: var(--bs-body-color);
    }

    .search-details {
      text-decoration: underline;
      display: inline; // algolia makes it a div
    }
  }
}

/* Quarto specific =========================================================== */
// Selectively copied from https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/html/_quarto-rules.scss#L110

span.smallcaps {
  font-variant: small-caps;
}

// task-list --------------------------------------------------------------

ul.task-list {
  list-style: none;
}

ul.task-list li input[type="checkbox"] {
  width: 0.8em;
  margin: 0 0.8em 0.2em -1em;
  /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
  vertical-align: middle;
}

// Figure and layout --------------------------------------------------------

figure.figure {
  display: block;
}

.quarto-layout-panel {
  margin-bottom: 1em;
}

.quarto-layout-panel>figure {
  width: 100%;
}

.quarto-layout-panel>figure>figcaption,
.quarto-layout-panel>.panel-caption {
  margin-top: 10pt;
}

.quarto-layout-panel>.table-caption {
  margin-top: 0px;
}

.table-caption p {
  margin-bottom: 0.5em;
}

.quarto-layout-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.quarto-layout-valign-top {
  align-items: flex-start;
}

.quarto-layout-valign-bottom {
  align-items: flex-end;
}

.quarto-layout-valign-center {
  align-items: center;
}

.quarto-layout-cell {
  position: relative;
  margin-right: 20px;
}

.quarto-layout-cell:last-child {
  margin-right: 0;
}

.quarto-layout-cell figure,
.quarto-layout-cell>p {
  margin: 0.2em;
}

.quarto-layout-cell img {
  max-width: 100%;
}

.quarto-layout-cell .html-widget {
  width: 100% !important;
}

.quarto-layout-cell div figure p {
  margin: 0;
}

.quarto-layout-cell figure {
  display: block;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.quarto-layout-cell table {
  display: inline-table;
}

.quarto-layout-cell-subref figcaption,
figure .quarto-layout-row figure figcaption {
  text-align: center;
  font-style: italic;
}

.quarto-figure {
  position: relative;
  margin-bottom: 1em;
}

.quarto-figure>figure {
  width: 100%;
  margin-bottom: 0;
}

.quarto-figure-left>figure>p,
.quarto-figure-left>figure>div

/* for mermaid and dot diagrams */
  {
  text-align: left;
}

.quarto-figure-center>figure>p,
.quarto-figure-center>figure>div

/* for mermaid and dot diagrams */
  {
  text-align: center;
}

.quarto-figure-right>figure>p,
.quarto-figure-right>figure>div

/* for mermaid and dot diagrams */
  {
  text-align: right;
}

.quarto-figure>figure>div.cell-annotation,
.quarto-figure>figure>div code {
  text-align: left;
  /* override align center for code blocks */
}

figure>p:empty {
  display: none;
}

figure>p:first-child {
  margin-top: 0;
  margin-bottom: 0;
}

figure>figcaption.quarto-float-caption-bottom {
  margin-bottom: 0.5em;
}

figure>figcaption.quarto-float-caption-top {
  margin-top: 0.5em;
}

// mermaid ---------------------------------------------------------

:root {
  --mermaid-bg-color: transparent;
  --mermaid-edge-color: var(--bs-secondary);
  --mermaid-fg-color: var(--bs-body-color);
  --mermaid-fg-color--lighter: RGBA(var(--bs-body-color-rgb), 0.9);
  --mermaid-fg-color--lightest: RGBA(var(--bs-body-color-rgb), 0.8);
  --mermaid-font-family: var(--bs-body-font-family);
  --mermaid-label-bg-color: var(--bs-primary);
  --mermaid-label-fg-color: var(--bs-body-color);
  --mermaid-node-bg-color: RGBA(var(--bs-primary-rgb), 0.1);
  --mermaid-node-fg-color: var(--bs-primary);
}

// auto-dark mode for rendered images ------------------------------

@mixin invert-filter {

  // vignette figures
  img.r-plt,
  // example figures
  pre .r-plt.img img,
  // quarto figures
  .cell-output-display img,
  .html-widget {
    filter: invert(100%) hue-rotate(180deg);
  }
}

[data-bs-theme="dark"] {
  @include invert-filter;

  .no-invert-dark-mode {
    @include invert-filter;
  }
}