// quarto-scss-analysis-annotation { "quarto-version": "1.7.18" }

// quarto-scss-analysis-annotation { "origin": "'use' section from format" }







// quarto-scss-analysis-annotation { "origin": "'use' section from Quarto" }





@use "sass:color" as quarto-color;
@use "sass:map" as quarto-map;
@use "sass:math" as quarto-math;


// quarto-scss-analysis-annotation { "origin": "'use' section from user-defined SCSS" }



// quarto-scss-analysis-annotation { "origin": "'functions' section from format" }





// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.

// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  @if length($map) > 0 {
    $values: map-values($map);
    $first-value: nth($values, 1);
    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

// Colors
@function to-rgb($value) {
  @return red($value), green($value), blue($value);
}

// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) {
  @if $identifier == "body" and $target == "bg" {
    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
  } @if $identifier == "body" and $target == "text" {
    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
  } @else {
    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
  }
}

@function map-loop($map, $func, $args...) {
  $_map: ();

  @each $key, $value in $map {
    // allow to pass the $key and $value of the map as an function argument
    $_args: ();
    @each $arg in $args {
      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
    }

    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
  }

  @return $_map;
}
// stylelint-enable scss/dollar-variable-pattern

@function varify($list) {
  $result: null;
  @each $entry in $list {
    $result: append($result, var(--#{$prefix}#{$entry}), space);
  }
  @return $result;
}

// Internal Bootstrap function to turn maps into its negative variant.
// It prefixes the keys with `n` and makes the value negative.
@function negativify-map($map) {
  $result: ();
  @each $key, $value in $map {
    @if $key != 0 {
      $result: map-merge($result, ("n" + $key: (-$value)));
    }
  }
  @return $result;
}

// Get multiple keys from a sass map
@function map-get-multiple($map, $values) {
  $result: ();
  @each $key, $value in $map {
    @if (index($values, $key) != null) {
      $result: map-merge($result, ($key: $value));
    }
  }
  @return $result;
}

// Merge multiple maps
@function map-merge-multiple($maps...) {
  $merged-maps: ();

  @each $map in $maps {
    $merged-maps: map-merge($merged-maps, $map);
  }
  @return $merged-maps;
}

// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Kitty Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

// See https://codepen.io/kevinweber/pen/dXWoRw
//
// Requires the use of quotes around data URIs.

@function escape-svg($string) {
  @if str-index($string, "data:image/svg+xml") {
    @each $char, $encoded in $escaped-characters {
      // Do not escape the url brackets
      @if str-index($string, "url(") == 1 {
        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
      } @else {
        $string: str-replace($string, $char, $encoded);
      }
    }
  }

  @return $string;
}

// Color contrast
// See https://github.com/twbs/bootstrap/pull/30168

// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;

@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
  $max-ratio: 0;
  $max-ratio-color: null;

  @each $color in $foregrounds {
    $contrast-ratio: contrast-ratio($background, $color);
    @if $contrast-ratio > $min-contrast-ratio {
      @return $color;
    } @else if $contrast-ratio > $max-ratio {
      $max-ratio: $contrast-ratio;
      $max-ratio-color: $color;
    }
  }

  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";

  @return $max-ratio-color;
}

@function contrast-ratio($background, $foreground: $color-contrast-light) {
  $l1: luminance($background);
  $l2: luminance(opaque($background, $foreground));

  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}

// Return WCAG2.1 relative luminance
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
  $rgb: (
    "r": red($color),
    "g": green($color),
    "b": blue($color)
  );

  @each $name, $value in $rgb {
    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
    $rgb: map-merge($rgb, ($name: $value));
  }

  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}

// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}

// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions

// Return valid calc
@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 + $value2;
  }

  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}

@function subtract($value1, $value2, $return-calc: true) {
  @if $value1 == null and $value2 == null {
    @return null;
  }

  @if $value1 == null {
    @return -$value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 - $value2;
  }

  @if type-of($value2) != number {
    $value2: unquote("(") + $value2 + unquote(")");
  }

  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

@function divide($dividend, $divisor, $precision: 10) {
  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
  $dividend: abs($dividend);
  $divisor: abs($divisor);
  @if $dividend == 0 {
    @return 0;
  }
  @if $divisor == 0 {
    @error "Cannot divide by 0";
  }
  $remainder: $dividend;
  $result: 0;
  $factor: 10;
  @while ($remainder > 0 and $precision >= 0) {
    $quotient: 0;
    @while ($remainder >= $divisor) {
      $remainder: $remainder - $divisor;
      $quotient: $quotient + 1;
    }
    $result: $result * 10 + $quotient;
    $factor: $factor * .1;
    $remainder: $remainder * 10;
    $precision: $precision - 1;
    @if ($precision < 0 and $remainder >= $divisor * 5) {
      $result: $result + 1;
    }
  }
  $result: $result * $factor * $sign;
  $dividend-unit: unit($dividend);
  $divisor-unit: unit($divisor);
  $unit-map: (
    "px": 1px,
    "rem": 1rem,
    "em": 1em,
    "%": 1%
  );
  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
    $result: $result * map-get($unit-map, $dividend-unit);
  }
  @return $result;
}

/////////////////////////////////////////////////////////////////
// Color contrasting (backported to BS4 from BS5)
// See https://github.com/twbs/bootstrap/pull/30168
/////////////////////////////////////////////////////////////////

// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;

@function color-contrast($background, $foregrounds: null) {

  // These variables should be defined in _variables.scss, but we also
  // define them here so that 3rd party libs can use if they want
  // without polluting the global namespace
  $black: #000 !default;
  $white: #fff !default;
  $color-contrast-dark: $black !default;
  $color-contrast-light: $white !default;
  $min-contrast-ratio: 3 !default;

  @if $foregrounds == null {
    $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
  } @else {
    $foregrounds: $foregrounds, $color-contrast-light, $color-contrast-dark, $white, $black;
  }

  $max-ratio: 0;
  $max-ratio-color: null;

  @each $color in $foregrounds {
    $contrast-ratio: contrast-ratio($background, $color);
    @if $contrast-ratio > $min-contrast-ratio {
      @return $color;
    } @else if $contrast-ratio > $max-ratio {
      $max-ratio: $contrast-ratio;
      $max-ratio-color: $color;
    }
  }

  $color-contrast-warnings: false !default;
  @if $color-contrast-warnings {
    @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
  }

  @return $max-ratio-color;
}

@function contrast-ratio($background, $foreground: $color-contrast-light) {
  $l1: luminance($background);
  $l2: luminance(opaque($background, $foreground));

  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}

// Return WCAG2.0 relative luminance
// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function luminance($color) {
  $rgb: (
    "r": red($color),
    "g": green($color),
    "b": blue($color)
  );

  @each $name, $value in $rgb {
    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
    $rgb: map-merge($rgb, ($name: $value));
  }

  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}

// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}

// Added in BS5 as an alternative to the \ operator, which
// throws warnings in Dart Sass
// https://github.com/twbs/bootstrap/pull/34245
@function divide($dividend, $divisor, $precision: 10) {
  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
  $dividend: abs($dividend);
  $divisor: abs($divisor);
  @if $dividend == 0 {
    @return 0;
  }
  @if $divisor == 0 {
    @error "Cannot divide by 0";
  }
  $remainder: $dividend;
  $result: 0;
  $factor: 10;
  @while ($remainder > 0 and $precision >= 0) {
    $quotient: 0;
    @while ($remainder >= $divisor) {
      $remainder: $remainder - $divisor;
      $quotient: $quotient + 1;
    }
    $result: $result * 10 + $quotient;
    $factor: $factor * .1;
    $remainder: $remainder * 10;
    $precision: $precision - 1;
    @if ($precision < 0 and $remainder >= $divisor * 5) {
      $result: $result + 1;
    }
  }
  $result: $result * $factor * $sign;
  $dividend-unit: unit($dividend);
  $divisor-unit: unit($divisor);
  $unit-map: (
    "px": 1px,
    "rem": 1rem,
    "em": 1em,
    "%": 1%
  );
  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
    $result: $result * map-get($unit-map, $dividend-unit);
  }
  @return $result;
}


// quarto-scss-analysis-annotation { "origin": "'functions' section from Quarto" }





@function colorToRGB($color) {
  @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
    ")";
}

@function colorToRGBA($color) {
  @return "rgba(" + red($color) + ", " + green($color) + ", " + blue($color) +
    ", " + alpha($color) + ")";
}

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }
  @return $string;
}

// Dims a color (either making it more white or more black)
@function theme-dim($baseColor, $amount) {
  @if (tone($baseColor) == "dark") {
    @return lighten($baseColor, $amount);
  } @else {
    @return darken($baseColor, $amount);
  }
}

// Provides a contrast color for a given color
// The color is the starting color that will used to form a contrasting color
// The bgColor is the color that will be used to test contrast (e.g. the color
// will be shifted until its contrast against the bgColor is acceptable)
@function theme-contrast($color, $bgColor, $level: "AAA") {
  // These will be defined in bootstrap, but creating values here
  // That will make this function accessible to callers prior to bootstrap variables
  // being set
  $black: rgb(0, 0, 0) !default;
  $white: rgb(255, 255, 255) !default;

  @if tone($bgColor) == "light" {
    @return accessibleContrast($color, $black, $bgColor, $level);
  } @else {
    @return accessibleContrast($color, $white, $bgColor, $level);
  }
}

@function accessibleContrast($startColor, $mixColor, $bgColor, $level: "AAA") {
  // A: 3:1
  // AA: 4.5:1
  // AAA: 7:1
  $goalContrastRatio: 3;
  @if $level == "AA" {
    $goalContrastRatio: 4.5;
  } @else {
    $goalContrastRatio: 7;
  }

  $percentMix: 100;
  $contrastRatio: 0;
  $contrastColor: null;
  @while ($contrastRatio < $goalContrastRatio and $percentMix > 0) {
    $contrastColor: mix(
      $startColor,
      $mixColor,
      percentage(quarto-math.div($percentMix, 100))
    );
    $contrastRatio: quarto-contrast($contrastColor, $bgColor);
    $percentMix: $percentMix - 1;
  }

  @return $contrastColor;
}

// Fades a color towards the background color
@function theme-fade($baseColor, $backgroundColor, $amount) {
  @if (tone($backgroundColor) == "dark") {
    @return darken($baseColor, $amount);
  } @else {
    @return lighten($baseColor, $amount);
  }
}

@function theme-highlight($baseColor, $backgroundColor, $amount) {
  @if (tone($backgroundColor) == "dark") {
    @return lighten($baseColor, $amount);
  } @else {
    @return darken($baseColor, $amount);
  }
}

@function theme-override-value($theme, $varname, $default) {
  // These will be defined in bootstrap, but creating values here
  // That will make this function accessible to callers prior to bootstrap variables
  // being set
  $black: rgb(0, 0, 0) !default;
  $white: rgb(255, 255, 255) !default;
  $gray-500: #adb5bd !default;
  $gray-300: #dee2e6 !default;
  $blue: #0d6efd !default;

  $simplex-border-mix: mix($white, $black, 93.5%) !default;

  $theme-overrides: (
    cerulean: (
      navbar-fg: $white,
      valuebox-bg-primary: #2fa4e7,
      valuebox-bg-info: #3d9dd1,
      valuebox-bg-success: #67a34d,
      valuebox-bg-warning: #aa9208,
      valuebox-bg-danger: #c48282,
    ),
    cosmo: (
      navbar-bg:
        if(
          $default == #2780e3,
          if(variable-exists(light), $light, $gray-500),
          $default
        ),
      link-color: #2761e3,
      valuebox-bg-primary: #5397e9,
      valuebox-bg-info: #9954bbb3,
      valuebox-bg-success: #3aa716,
      valuebox-bg-warning: #fa6400,
      valuebox-bg-danger: #ff0039b3,
    ),
    cyborg: (
      navbar-bg:
        if(
          $default == #2a9fd6,
          if(variable-exists(secondary), $secondary, $black),
          $default
        ),
      navbar-hl: $white,
    ),
    darkly: (
      navbar-fg: $gray-300,
      navbar-hl: $white,
      input-border-color: $gray-500,
    ),
    flatly: (
      navbar-hl: $white,
      valuebox-bg-primary: rgba(39, 128, 227, 0.7),
      valuebox-bg-info: rgba(153, 84, 187, 0.7),
      valuebox-bg-success: rgba(63, 182, 24, 0.7),
      valuebox-bg-warning: rgba(255, 117, 24, 0.7),
      valuebox-bg-danger: rgba(255, 0, 57, 0.7),
    ),
    journal: (
      navbar-fg: rgba($white, 0.7),
      navbar-hl: $white,
      valuebox-bg-primary: #f0938f,
      valuebox-bg-info: #3d9dd1,
      valuebox-bg-success: #65a244,
      valuebox-bg-warning: #ad9310,
      valuebox-bg-danger: #c77f7f,
    ),
    litera: (
      navbar-bg: if($default == #4582ec, $white, $default),
    ),
    lumen: (
      navbar-fg: rgba($white, 0.7),
      navbar-hl: $white,
      valuebox-bg-primary: #67abcc,
      valuebox-bg-info: #3d9dd1,
      valuebox-bg-success: #5ea343,
      valuebox-bg-warning: #a79011,
      valuebox-bg-danger: #ca8181,
    ),
    lux: (),
    materia: (
      navbar-fg: rgba($white, 0.7),
      navbar-hl: $white,
    ),
    minty: (
      navbar-fg: $white,
    ),
    morph: (
      navbar-bg:
        if(
          $default == #378dfc,
          if(variable-exists(body-bg), $body-bg, $black),
          $default
        ),
      navbar-fg: rgba($black, 0.5),
    ),
    paper: (
      valuebox-bg-primary: #4396ea,
      valuebox-bg-info: #c277cf,
      valuebox-bg-success: #59a343,
      valuebox-bg-warning: #d68100,
      valuebox-bg-danger: #f46762,
    ),
    pulse: (
      navbar-fg: rgba($white, 0.7),
      navbar-hl: $white,
    ),
    quartz: (
      navbar-fg: rgba($white, 0.8),
      navbar-hl: $white,
    ),
    sandstone: (
      navbar-bg:
        if(
          $default == #325d88,
          if(variable-exists(dark), $dark, $black),
          $default
        ),
      navbar-fg: rgba($white, 0.7),
      navbar-hl: $white,
      valuebox-bg-primary: #7b98ad,
      valuebox-bg-info: #3d9dd1,
      valuebox-bg-success: #60a545,
      valuebox-bg-warning: #af8e08,
      valuebox-bg-danger: #ca8181,
    ),
    simplex: (
      navbar-bg: if($default == #d9230f, $white, $default),
      navbar-fg: rgba($black, 0.6),
      navbar-hl: $black,
      nav-tabs-link-active-border-color: $simplex-border-mix $simplex-border-mix
        transparent,
      valuebox-bg-primary: #db766b,
      valuebox-bg-info: #359ed0,
      valuebox-bg-success: #59a343,
      valuebox-bg-warning: #a59212,
      valuebox-bg-danger: #c48282,
    ),
    sketchy: (
      navbar-fg: $white,
    ),
    slate: (),
    solar: (
      navbar-bg:
        if(
          $default == #b58900,
          if(variable-exists(dark), $dark, $black),
          $default
        ),
      navbar-hl: $white,
    ),
    spacelab: (
      navbar-bg:
        if(
          $default == #446e9b,
          if(variable-exists(light), $light, #bbb),
          $default
        ),
      navbar-hl: if(variable-exists(link-color), $link-color, $blue),
      valuebox-bg-primary: #7e97ae,
      valuebox-bg-info: #3d9dd1,
      valuebox-bg-success: #62a540,
      valuebox-bg-warning: #a59212,
      valuebox-bg-danger: #c97e7e,
    ),
    superhero: (
      navbar-bg:
        if(
          $default == #df6919,
          if(variable-exists(dark), $dark, $black),
          $default
        ),
      navbar-hl: $white,
    ),
    united: (
      navbar-fg: rgba($white, 0.8),
      navbar-hl: $white,
      valuebox-bg-primary: #5c9bbc,
      valuebox-bg-info: #3d9dd1,
      valuebox-bg-success: #60a545,
      valuebox-bg-warning: #9a9623,
      valuebox-bg-danger: #c48282,
    ),
    vapor: (
      navbar-fg: rgba($white, 0.8),
      navbar-hl: $white,
    ),
    yeti: (),
    zephyr: (),
  );

  $val: null;
  @if ($theme != null) {
    $theme-vals: quarto-map.get($theme-overrides, $theme);
    @if ($theme-vals != null) {
      $val: quarto-map.get($theme-vals, $varname);
    }
  }

  @if ($val != null) {
    @return $val;
  } @else {
    @return $default;
  }
}

@function theme-navbar-bg($theme, $primary) {
  $white: rgb(255, 255, 255) !default;

  // These will be defined in bootstrap, but creating values here
  // That will make this function accessible to callers prior to bootstrap variables
  // being set
  $theme-bgs: (
    litera: $white,
    cyborg: if(variable-exists(body-bg), $body-bg, #000),
  );

  $bg: quarto-map.get($theme-bgs, $theme);
  @if ($bg != null) {
    @return $bg;
  } @else {
    @return if(variable-exists(primary), $primary, #fff);
  }
}

@function theme-navbar-fg($theme, $primary) {
  $white: rgb(255, 255, 255) !default;

  // These will be defined in bootstrap, but creating values here
  // That will make this function accessible to callers prior to bootstrap variables
  // being set
  $theme-fgs: (
    cerulean: $white,
  );

  $bg: quarto-map.get($theme-bgs, $theme);
  @if ($bg != null) {
    @return $bg;
  } @else {
    @return if(variable-exists(primary), $primary, #fff);
  }
}

@function repeat-chars($chars, $n) {
  $final: "";
  @for $i from 1 through $n {
    $final: $final + $chars;
  }
  @return $final;
}

@function _linear-channel-value($channel-value) {
  $normalized-channel-value: quarto-math.div($channel-value, 255);
  @if $normalized-channel-value < 0.03928 {
    @return quarto-math.div($normalized-channel-value, 12.92);
  }

  @return quarto-math.pow(
    quarto-math.div(($normalized-channel-value + 0.055), 1.055),
    2.4
  );
}

// Calculate the luminance for a color.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function luminance($color) {
  $red: _linear-channel-value(quarto-color.red($color));
  $green: _linear-channel-value(quarto-color.green($color));
  $blue: _linear-channel-value(quarto-color.blue($color));

  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

// Calculate the contrast ratio between two colors.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function quarto-contrast($back, $front) {
  $backLum: luminance($back) + 0.05;
  $foreLum: luminance($front) + 0.05;

  @return quarto-math.div(
    quarto-math.max($backLum, $foreLum),
    quarto-math.min($backLum, $foreLum)
  );
}

// Determine whether the color is 'light' or 'dark'.
@function tone($color) {
  @if $color == "dark" or $color == "light" {
    @return $color;
  }

  $minimumContrast: 3.1;

  $lightContrast: quarto-contrast($color, white);
  $darkContrast: quarto-contrast($color, rgba(black, 0.87));

  @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
    @return "light";
  } @else {
    @return "dark";
  }
}

// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
// Returns 'dark' if the given color is light and 'light' if the given color is dark.
@function contrast-tone($color) {
  @return if(tone($color) == "dark", "light", "dark");
}


// quarto-scss-analysis-annotation { "origin": "'functions' section from user-defined SCSS" }



// quarto-scss-analysis-annotation { "origin": "Defaults from user-defined SCSS" }


// Heading font size customization
$h1-font-size: 2rem !default;
$h2-font-size: 1.65rem !default;
$h3-font-size: 1.45rem !default;
$h4-font-size: 1.25rem !default;
$h5-font-size: 1.1rem !default;

$kbd-padding-y: 0.4rem !default;
$kbd-padding-x: 0.4rem !default;

// Speed up the default transition for the navbar
$transition-collapse: height 0.2s ease !default;

// Adjust the base font size up a little
$font-size-root: 17px !default;

// Disable smooth scrolling
$enable-smooth-scroll: false !default;

// quarto-scss-analysis-annotation { "origin": "cosmo (builtin theme)" }

$theme: "cosmo" !default;

//
// Color system
//

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #373a3c !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$blue:    #2780e3 !default;
$indigo:  #6610f2 !default;
$purple:  #613d7c !default;
$pink:    #e83e8c !default;
$red:     #ff0039 !default;
$orange:  #f0ad4e !default;
$yellow:  #ff7518 !default;
$green:   #3fb618 !default;
$teal:    #20c997 !default;
$cyan:    #9954bb !default;

$primary:       $blue !default;
$secondary:     $gray-800 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$min-contrast-ratio:   2.6 !default;

// Options

$enable-rounded: false !default;

// Body

$body-color:    $gray-800 !default;

// Fonts

// stylelint-disable-next-line value-keyword-case
$font-family-sans-serif:    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$headings-font-weight:      400 !default;

// Navbar

$navbar-dark-hover-color:       rgba($white, 1) !default;
$navbar-light-hover-color:      rgba($black, .9) !default;

// Alerts

$alert-border-width:            0 !default;

// Progress bars

$progress-height:               .5rem !default;



// Base document colors
$body-bg: white;
$body-color: #303030;
$link-color: #75AADB;
$font-size-root: 12pt;
$bs-body-font-size: 1rem;
$h1-font-size: $font-size-root !default;
$h2-font-size: $font-size-root !default;
$h3-font-size: $font-size-root !default;
$h4-font-size: $font-size-root !default;
$h5-font-size: $font-size-root !default;
$table-striped-bg: #FFFFFF;
// Code blocks
$code-block-bg-alpha: -.8;


/*-- scss: functions --*/

@function bannerColor() {
  @if $title-banner-color {
    @return $title-banner-color;
  } @else {
    @if variable-exists(navbar-fg) {
      @return $navbar-fg;
    } @else {
      @return $body-bg;
    }
  }
}

@function bannerDim() {
  @return theme-fade(bannerColor(), bannerBg(), 20%);
}

@function bannerBg() {
  @if $title-banner-bg {
    @return $title-banner-bg;
  } @else {
    // figure out default background, navbar  of body color
    @if variable-exists(navbar-bg) {
      @return $navbar-bg;
    } @else {
      @return $body-color;
    }
  }
}

/*-- scss:variables --*/
$title-banner-color: null !default;
$title-banner-bg: null !default;
$title-banner-image: null !default;


$btn-code-copy-color: #5E5E5E !default;
$btn-code-copy-color-active: #4758AB !default;
$theme: "brand" !default;

// quarto-scss-analysis-annotation { "origin": "Defaults from Quarto's SCSS" }

$code-copy-selector: "pre.sourceCode:hover > " !default;
$code-white-space: pre !default;
$tbl-cap-location: top !default;
$sidebar-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
// Default the theme name
$theme-name: if(variable-exists(theme), $theme, "");

// Colors that must be defined
$blue: #0d6efd !default;
$primary: $blue !default;
$white: #ffffff !default;
$gray-200: #e9ecef !default;
$gray-100: #f8f9fa !default;
$gray-900: #212529 !default;
// Pending SCSS change until Charles clears it with us
// $link-color: theme-override-value($theme-name, "link-color", $primary) !default;
//
$link-color: $primary !default;
$link-color: if(
  $link-color == $blue,
  theme-override-value($theme-name, "link-color", $link-color),
  $link-color
);
$link-color-bg: transparent !default;

/* Code Block Formatting */
// Code Block Border Treatment
$code-block-border-left: false !default;
$code-block-border-left-style: solid !default;
$code-block-border-left-size: 3px !default;
$code-block-padding-left: 0.6em !default;

// Code Block Background Treatment
// $code-block-bg, $code-block-bg-padding, $code-block-bg-alpha
$code-block-bg: true !default;
$code-block-bg-padding: 0.4em !default;
$code-block-bg-alpha: -0.35 !default;

// Controls when the code block will switch to a dark
// version of a theme
$code-block-theme-dark-threshhold: 40% !default;

/* Inline Code Formatting */
// $code-bg, $code-color, $code-padding
$code-color: #7d12ba !default;

// Set a default body emphasis color
$code-bg: $gray-100 !default;

// toc variables
$toc-color: $link-color !default;
$toc-font-size: 0.875rem !default;
$toc-active-border: $toc-color !default;
$toc-inactive-border: $gray-200 !default;

$toc-tools-font-size: 0.8rem !default;

/* Callout customization */
// Formatting
$callout-border-width: 5px !default;
$callout-border-scale: 0% !default;
$callout-icon-scale: 10% !default;
$callout-margin-top: 1.25rem !default;
$callout-margin-bottom: 1.25rem !default;

// Navbar
$navbar-default: if(
  variable-exists(theme),
  if(variable-exists(primary), $primary, #517699),
  #517699
);

// If the user provides a navbar-bg, we ned to ignore the
// theme overide and just recalculate a good value
$navbar-hl-override: if(
  variable-exists(navbar-bg) and variable-exists(link-color),
  theme-contrast($link-color, $navbar-bg),
  false
);
$navbar-bg: theme-override-value(
  $theme-name,
  "navbar-bg",
  $navbar-default
) !default;

$btn-bg: if(variable-exists(secondary), $secondary, #6c757d) !default;
$btn-fg: theme-contrast($btn-bg, $btn-bg) !default;

$body-contrast-bg: if(variable-exists(body-bg), $body-bg, $white);
$body-contrast-color: if(variable-exists(body-color), $body-color, $gray-900);
$navbar-fg: if(
  $navbar-bg == transparent,
  theme-override-value(
    $theme-name,
    "navbar-fg",
    theme-contrast($body-contrast-color, $body-contrast-bg)
  ),
  theme-override-value(
    $theme-name,
    "navbar-fg",
    theme-contrast($navbar-bg, $navbar-bg)
  )
) !default;

$navbar-hl: if(
  $navbar-hl-override != false,
  $navbar-hl-override,
  theme-override-value(
    $theme-name,
    "navbar-hl",
    if(
      variable-exists(link-color),
      theme-contrast($link-color, $navbar-bg),
      $navbar-fg
    )
  )
) !default;
$navbar-brand: theme-override-value(
  $theme-name,
  "navbar-brand",
  $navbar-fg
) !default;
$navbar-brand-hl: theme-override-value(
  $theme-name,
  "navbar-brand-hl",
  $navbar-hl
) !default;

$navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-fg}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-toggler-border-color: rgba($navbar-fg, 0) !default;
$navbar-hover-color: rgba($navbar-hl, 0.8) !default;
$navbar-disabled-color: rgba($navbar-fg, 0.75) !default;
$navbar-toggler-padding-x: 0 !default;
$navbar-toggler-padding-y: 0.25 !default;

// We omit the !default here b/c the dark and light variants
// are not meaningful in our usage of bootstrap. Instead, we will explicitly
// manage these using the above documented variables
$navbar-dark-bg: $navbar-bg;
$navbar-dark-color: $navbar-fg;
$navbar-dark-hover-color: $navbar-hover-color;
$navbar-dark-active-color: $navbar-hl;
$navbar-dark-disabled-color: $navbar-disabled-color;
$navbar-dark-toggler-icon-bg: $navbar-toggler-icon-bg;
$navbar-dark-toggler-border-color: $navbar-toggler-border-color;

$navbar-light-bg: $navbar-bg;
$navbar-light-color: $navbar-fg;
$navbar-light-hover-color: $navbar-hover-color;
$navbar-light-active-color: $navbar-hl;
$navbar-light-disabled-color: $navbar-disabled-color;
$navbar-light-toggler-icon-bg: $navbar-toggler-icon-bg;
$navbar-light-toggler-border-color: $navbar-toggler-border-color;

$navbar-light-brand-color: $navbar-brand;
$navbar-light-brand-hover-color: $navbar-brand-hl;
$navbar-dark-brand-color: $navbar-brand;
$navbar-dark-brand-hover-color: $navbar-brand-hl;

// Sidebar coloring
$sidebar-bg: if(variable-exists(light), $light, #fff) !default;
$sidebar-fg: null !default;
@if $sidebar-bg == transparent {
  $sidebar-fg: theme-contrast($body-contrast-color, $body-contrast-bg) !default;
} @else {
  $sidebar-fg: theme-contrast($sidebar-bg, $sidebar-bg) !default;
}
$sidebar-hl: null;
$sidebar-font-size: 0.925rem !default;
$sidebar-font-size-section: 0.875rem !default;
$sidebar-font-size-collapse: 1rem !default;
$sidebar-font-size-section-collapse: 1.1rem !default;
$sidebar-border: false !default;

// Title block variables
$title-block-color: $body-contrast-color !default;
$title-block-contast-color: $body-contrast-bg !default;
$title-block-padding-top: 2.5em !default;

// Footer coloring
$footer-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
$footer-fg: theme-contrast($footer-bg, $footer-bg, "AA") !default;
$footer-font-size: 0.825em !default;
$footer-left-font-size: $footer-font-size !default;
$footer-center-font-size: $footer-font-size !default;
$footer-right-font-size: $footer-font-size !default;

// Disable default grid system and switch to CSS grid
$enable-grid-classes: false;
$enable-cssgrid: true;

$zindex-pagelayout: 998;

$popover-bg: if(variable-exists(body-bg), $body-bg, null) !default;
$input-bg: if(variable-exists(body-bg), $body-bg, null) !default;

// Note that 'default' is intentionally omitted from this
// because we're using the default value if one is defined at this
// point (the if variable exists check in the default).
// This is a change to override the input border color for
// darkly, which sets the border color to the body color for
// whatever reason.
$input-border-color: theme-override-value(
  $theme-name,
  "input-border-color",
  if(variable-exists(input-border-color), $input-border-color, null)
);

// Same as above (default is respected if there is not override
// so the `!default` keyword is omitted). Some themes don't provide
// active tab border colors and they customize the main border
// color which results in the tabs looking slightly weird since the
// colors may not match (for example, simplex).
$nav-tabs-link-active-border-color: theme-override-value(
  $theme-name,
  "nav-tabs-link-active-border-color",
  if(
    variable-exists(nav-tabs-link-active-border-color),
    $nav-tabs-link-active-border-color,
    null
  )
);

/* GRID VARIABLES */
// The left hand sidebar
$grid-sidebar-width: 250px !default;
// The main body
$grid-body-width: 800px !default;
// The right hand margin bar
$grid-margin-width: 250px !default;
// The gutter that appears between the above columns
$grid-column-gutter-width: 1.5em !default;

/* CODE ANNOTATION COLORS */
$code-annotation-higlight-color: #aaaaaa44 !default;
$code-annotation-higlight-bg: #aaaaaa22 !default;

$breadcrumb-divider: quote(">") !default;

// table variable overrides
$table-group-separator-color: mix(
  if(variable-exists(body-color), $body-color, $gray-900),
  $body-contrast-bg,
  50%
) !default;
$table-group-separator-color-lighter: mix(
  if(variable-exists(body-color), $body-color, $gray-900),
  $body-contrast-bg,
  20%
) !default;

$bootstrap-version: 5;

$h1h2h3-font-weight: 600 !default;

// variables required by _brand.yml

// these variables need to have been defined here already
// and are repeated in the framework's own _variables.scss
// This will require us to monitor framework changes
// to avoid drift
$font-weight-base: 400 !default;
$small-font-size: 0.875em !default;
$code-font-size: $small-font-size !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace !default;

$font-family-monospace-block: $font-family-monospace !default;
$font-family-monospace-inline: $font-family-monospace !default;
$font-weight-monospace: $font-weight-base !default;
$font-weight-monospace-block: $font-weight-monospace !default;
$font-weight-monospace-inline: $font-weight-monospace !default;
$code-block-font-size: $code-font-size !default;
$code-inline-font-size: $code-font-size !default;
$link-weight: $font-weight-base !default;
$link-decoration: null !default;

// border colors
/// if a theme does not provide body-color or body-bg
/// defaults to boostrap own default value for theses variables (in _variables.scss)
$border-color: mix(
  if(variable-exists(body-color), $body-color, $gray-900),
  if(variable-exists(body-bg), $body-bg, $white),
  15%
) !default;
/// Make sure table border are the same as the border color (in case change in bootstrap default)
$table-border-color: $border-color !default;

// code block colors
$btn-code-copy-color: if(
  variable-exists(text-muted),
  $text-muted,
  if(variable-exists(body-color), $body-color, $gray-900)
) !default;

$btn-code-copy-color-active: if(
  variable-exists(link-color),
  $link-color,
  #0d6efd
) !default;






// quarto-scss-analysis-annotation { "origin": "Defaults from the format SCSS" }

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Color system

// scss-docs-start gray-color-variables
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;
// scss-docs-end gray-color-variables

// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
) !default;
// scss-docs-end gray-colors-map
// fusv-enable

// scss-docs-start color-variables
$blue:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #198754 !default;
$teal:    #20c997 !default;
$cyan:    #0dcaf0 !default;
// scss-docs-end color-variables

// scss-docs-start colors-map
$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
) !default;
// scss-docs-end colors-map

// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio:   4.5 !default;

// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark:      $black !default;
$color-contrast-light:     $white !default;

// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;

$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;

$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;

$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;

$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;

$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;

$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;

$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;

$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;

$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;

$blues: (
  "blue-100": $blue-100,
  "blue-200": $blue-200,
  "blue-300": $blue-300,
  "blue-400": $blue-400,
  "blue-500": $blue-500,
  "blue-600": $blue-600,
  "blue-700": $blue-700,
  "blue-800": $blue-800,
  "blue-900": $blue-900
) !default;

$indigos: (
  "indigo-100": $indigo-100,
  "indigo-200": $indigo-200,
  "indigo-300": $indigo-300,
  "indigo-400": $indigo-400,
  "indigo-500": $indigo-500,
  "indigo-600": $indigo-600,
  "indigo-700": $indigo-700,
  "indigo-800": $indigo-800,
  "indigo-900": $indigo-900
) !default;

$purples: (
  "purple-100": $purple-100,
  "purple-200": $purple-200,
  "purple-300": $purple-300,
  "purple-400": $purple-400,
  "purple-500": $purple-500,
  "purple-600": $purple-600,
  "purple-700": $purple-700,
  "purple-800": $purple-800,
  "purple-900": $purple-900
) !default;

$pinks: (
  "pink-100": $pink-100,
  "pink-200": $pink-200,
  "pink-300": $pink-300,
  "pink-400": $pink-400,
  "pink-500": $pink-500,
  "pink-600": $pink-600,
  "pink-700": $pink-700,
  "pink-800": $pink-800,
  "pink-900": $pink-900
) !default;

$reds: (
  "red-100": $red-100,
  "red-200": $red-200,
  "red-300": $red-300,
  "red-400": $red-400,
  "red-500": $red-500,
  "red-600": $red-600,
  "red-700": $red-700,
  "red-800": $red-800,
  "red-900": $red-900
) !default;

$oranges: (
  "orange-100": $orange-100,
  "orange-200": $orange-200,
  "orange-300": $orange-300,
  "orange-400": $orange-400,
  "orange-500": $orange-500,
  "orange-600": $orange-600,
  "orange-700": $orange-700,
  "orange-800": $orange-800,
  "orange-900": $orange-900
) !default;

$yellows: (
  "yellow-100": $yellow-100,
  "yellow-200": $yellow-200,
  "yellow-300": $yellow-300,
  "yellow-400": $yellow-400,
  "yellow-500": $yellow-500,
  "yellow-600": $yellow-600,
  "yellow-700": $yellow-700,
  "yellow-800": $yellow-800,
  "yellow-900": $yellow-900
) !default;

$greens: (
  "green-100": $green-100,
  "green-200": $green-200,
  "green-300": $green-300,
  "green-400": $green-400,
  "green-500": $green-500,
  "green-600": $green-600,
  "green-700": $green-700,
  "green-800": $green-800,
  "green-900": $green-900
) !default;

$teals: (
  "teal-100": $teal-100,
  "teal-200": $teal-200,
  "teal-300": $teal-300,
  "teal-400": $teal-400,
  "teal-500": $teal-500,
  "teal-600": $teal-600,
  "teal-700": $teal-700,
  "teal-800": $teal-800,
  "teal-900": $teal-900
) !default;

$cyans: (
  "cyan-100": $cyan-100,
  "cyan-200": $cyan-200,
  "cyan-300": $cyan-300,
  "cyan-400": $cyan-400,
  "cyan-500": $cyan-500,
  "cyan-600": $cyan-600,
  "cyan-700": $cyan-700,
  "cyan-800": $cyan-800,
  "cyan-900": $cyan-900
) !default;
// fusv-enable

// Semantically, $secondary is closest to BS3's 'default' theme color;
// so use that if specified. Otherwise, use a light instead of dark gray
// default color for $default since that's closer to bootstrap 3's default
$default: if(variable-exists("secondary"), $secondary, $gray-300) !default;

// scss-docs-start theme-color-variables
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;
// scss-docs-end theme-color-variables

// scss-docs-start theme-colors-map
$theme-colors: (
  // default needs to be 1st so that .btn-default comes before .btn-primary
  // & therefore has lower priority.
  "default":    $default,
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;
// scss-docs-end theme-colors-map

// scss-docs-start theme-text-variables
$primary-text-emphasis:   shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis:   shade-color($success, 60%) !default;
$info-text-emphasis:      shade-color($info, 60%) !default;
$warning-text-emphasis:   shade-color($warning, 60%) !default;
$danger-text-emphasis:    shade-color($danger, 60%) !default;
$light-text-emphasis:     $gray-700 !default;
$dark-text-emphasis:      $gray-700 !default;
// scss-docs-end theme-text-variables

// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle:       tint-color($primary, 80%) !default;
$secondary-bg-subtle:     tint-color($secondary, 80%) !default;
$success-bg-subtle:       tint-color($success, 80%) !default;
$info-bg-subtle:          tint-color($info, 80%) !default;
$warning-bg-subtle:       tint-color($warning, 80%) !default;
$danger-bg-subtle:        tint-color($danger, 80%) !default;
$light-bg-subtle:         mix($gray-100, $white) !default;
$dark-bg-subtle:          $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables

// scss-docs-start theme-border-subtle-variables
$primary-border-subtle:   tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle:   tint-color($success, 60%) !default;
$info-border-subtle:      tint-color($info, 60%) !default;
$warning-border-subtle:   tint-color($warning, 60%) !default;
$danger-border-subtle:    tint-color($danger, 60%) !default;
$light-border-subtle:     $gray-200 !default;
$dark-border-subtle:      $gray-500 !default;
// scss-docs-end theme-border-subtle-variables

// Characters which are escaped by the escape-svg function
$escaped-characters: (
  ("<", "%3c"),
  (">", "%3e"),
  ("#", "%23"),
  ("(", "%28"),
  (")", "%29"),
) !default;

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                true !default;
$enable-rounded:              true !default;
$enable-shadows:              false !default;
$enable-gradients:            false !default;
$enable-transitions:          true !default;
$enable-reduced-motion:       true !default;
$enable-smooth-scroll:        true !default;
$enable-grid-classes:         true !default;
$enable-container-classes:    true !default;
$enable-cssgrid:              false !default;
$enable-button-pointers:      true !default;
$enable-rfs:                  true !default;
$enable-validation-icons:     true !default;
$enable-negative-margins:     false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities:  true !default;

$enable-dark-mode:            true !default;
$color-mode-type:             data !default; // `data` or `media-query`

// Prefix for :root CSS variables

$variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix:                      $variable-prefix !default;

// Gradient
//
// The gradient which is added to components if `$enable-gradients` is `true`
// This gradient is also added to elements with `.bg-gradient`
// scss-docs-start variable-gradient
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
// scss-docs-end variable-gradient

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;
// scss-docs-end spacer-variables-maps

// Position
//
// Define the edge positioning anchors of the position utilities.

// scss-docs-start position-map
$position-values: (
  0: 0,
  50: 50%,
  100: 100%
) !default;
// scss-docs-end position-map

// Body
//
// Settings for the `<body>` element.

$body-text-align:           null !default;
$body-color:                $gray-900 !default;
$body-bg:                   $white !default;

$body-secondary-color:      rgba($body-color, .75) !default;
$body-secondary-bg:         $gray-200 !default;

$body-tertiary-color:       rgba($body-color, .5) !default;
$body-tertiary-bg:          $gray-100 !default;

$body-emphasis-color:       $black !default;

// Links
//
// Style anchor elements.

$link-color:                              $primary !default;
$link-decoration:                         underline !default;
$link-shade-percentage:                   20% !default;
$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration:                   null !default;

$stretched-link-pseudo-element:           after !default;
$stretched-link-z-index:                  1 !default;

// Icon links
// scss-docs-start icon-link-variables
$icon-link-gap:               .375rem !default;
$icon-link-underline-offset:  .25em !default;
$icon-link-icon-size:         1em !default;
$icon-link-icon-transition:   .2s ease-in-out transform !default;
$icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
// scss-docs-end icon-link-variables

// Paragraphs
//
// Style p element.

$paragraph-margin-bottom:   1rem !default;


// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

// scss-docs-start grid-breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;
// scss-docs-end grid-breakpoints

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

// scss-docs-start container-max-widths
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;
// scss-docs-end container-max-widths

@include _assert-ascending($container-max-widths, "$container-max-widths");


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           1.5rem !default;
$grid-row-columns:            6 !default;

// Container padding

$container-padding-x: $grid-gutter-width !default;


// Components
//
// Define common padding and border radius sizes and more.

// scss-docs-start border-variables
$border-width:                1px !default;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
) !default;
$border-style:                solid !default;
$border-color:                $gray-300 !default;
$border-color-translucent:    rgba($black, .175) !default;
// scss-docs-end border-variables

// scss-docs-start border-radius-variables
$border-radius:               .375rem !default;
$border-radius-sm:            .25rem !default;
$border-radius-lg:            .5rem !default;
$border-radius-xl:            1rem !default;
$border-radius-xxl:           2rem !default;
$border-radius-pill:          50rem !default;
// scss-docs-end border-radius-variables
// fusv-disable
$border-radius-2xl:           $border-radius-xxl !default; // Deprecated in v5.3.0
// fusv-enable

// scss-docs-start box-shadow-variables
$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
// scss-docs-end box-shadow-variables

$component-active-bg:         $primary !default;
$component-active-color:      color-contrast($component-active-bg) !default;

// scss-docs-start focus-ring-variables
$focus-ring-width:      .25rem !default;
$focus-ring-opacity:    .25 !default;
$focus-ring-color:      rgba($primary, $focus-ring-opacity) !default;
$focus-ring-blur:       0 !default;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// scss-docs-end focus-ring-variables

// scss-docs-start caret-variables
$caret-width:                 .3em !default;
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;
// scss-docs-end caret-variables

$transition-base:             all .2s ease-in-out !default;
$transition-fade:             opacity .15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse:         height .35s ease !default;
$transition-collapse-width:   width .35s ease !default;
// scss-docs-end collapse-transition

// stylelint-disable function-disallowed-list
// scss-docs-start aspect-ratios
$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
) !default;
// scss-docs-end aspect-ratios
// stylelint-enable function-disallowed-list

// Typography
//
// Font, line-height, and color for body text, headings, and more.

// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case
$font-family-base:            $font-family-sans-serif !default;
$font-family-code:            $font-family-monospace !default;

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null !default;
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875 !default;
$font-size-lg:                $font-size-base * 1.25 !default;

$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-medium:          500 !default;
$font-weight-semibold:        600 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          bolder !default;

$font-weight-base:            $font-weight-normal !default;

$line-height-base:            1.5 !default;
$line-height-sm:              1.25 !default;
$line-height-lg:              2 !default;

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;
// scss-docs-end font-variables

// scss-docs-start font-sizes
$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
) !default;
// scss-docs-end font-sizes

// scss-docs-start headings-variables
$headings-margin-bottom:      $spacer * .5 !default;
$headings-font-family:        null !default;
$headings-font-style:         null !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              inherit !default;
// scss-docs-end headings-variables

// scss-docs-start display-headings
$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
) !default;

$display-font-family: null !default;
$display-font-style:  null !default;
$display-font-weight: 300 !default;
$display-line-height: $headings-line-height !default;
// scss-docs-end display-headings

// scss-docs-start type-variables
$lead-font-size:              $font-size-base * 1.25 !default;
$lead-font-weight:            300 !default;

$small-font-size:             .875em !default;

$sub-sup-font-size:           .75em !default;

// fusv-disable
$text-muted:                  $body-secondary-color !default; // Deprecated in 5.3.0
// fusv-enable

$initialism-font-size:        $small-font-size !default;

$blockquote-margin-y:         $spacer !default;
$blockquote-font-size:        $font-size-base * 1.25 !default;
$blockquote-footer-color:     $gray-600 !default;
$blockquote-footer-font-size: $small-font-size !default;
$blockquote-border-width:     $spacer / 4 !default;
$blockquote-border-color:     $gray-200 !default;

$hr-margin-y:                 $spacer !default;
$hr-color:                    inherit !default;

// fusv-disable
$hr-bg-color:                 null !default; // Deprecated in v5.2.0
$hr-height:                   null !default; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null !default; // Allows for inherited colors
$hr-border-width:             $border-width !default;
$hr-opacity:                  .25 !default;

// scss-docs-start vr-variables
$vr-border-width:             $border-width !default;
// scss-docs-end vr-variables

$legend-margin-bottom:        .5rem !default;
$legend-font-size:            1.5rem !default;
$legend-font-weight:          null !default;

$dt-font-weight:              $font-weight-bold !default;

$list-inline-padding:         .5rem !default;

$mark-padding:                .1875em !default;
$mark-bg:                     $yellow-100 !default;
// scss-docs-end type-variables


// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

// scss-docs-start table-variables
$table-cell-padding-y:        .5rem !default;
$table-cell-padding-x:        .5rem !default;
$table-cell-padding-y-sm:     .25rem !default;
$table-cell-padding-x-sm:     .25rem !default;

$table-cell-vertical-align:   top !default;

$table-color:                 $body-color !default;
$table-bg:                    $body-bg !default;
$table-accent-bg:             transparent !default;

$table-th-font-weight:        null !default;

$table-striped-color:         $table-color !default;
$table-striped-bg-factor:     .05 !default;
$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;

$table-active-color:          $table-color !default;
$table-active-bg-factor:      .1 !default;
$table-active-bg:             rgba($black, $table-active-bg-factor) !default;

$table-hover-color:           $table-color !default;
$table-hover-bg-factor:       .075 !default;
$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;

$table-border-factor:         .1 !default;
$table-border-width:          $border-width !default;
$table-border-color:          $border-color !default;

$table-striped-order:         odd !default;
$table-striped-columns-order: even !default;

$table-group-separator-color: currentcolor !default;

$table-caption-color:         $body-secondary-color !default;

$table-bg-scale:              -80% !default;
// scss-docs-end table-variables

// scss-docs-start table-loop
$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
) !default;
// scss-docs-end table-loop


// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

// scss-docs-start input-btn-variables
$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
$input-btn-font-family:       null !default;
$input-btn-font-size:         $font-size-base !default;
$input-btn-line-height:       $line-height-base !default;

$input-btn-focus-width:         $focus-ring-width !default;
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
$input-btn-focus-color:         $focus-ring-color !default;
$input-btn-focus-blur:          $focus-ring-blur !default;
$input-btn-focus-box-shadow:    $focus-ring-box-shadow !default;

$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-x-sm:      .5rem !default;
$input-btn-font-size-sm:      $font-size-sm !default;

$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;
$input-btn-font-size-lg:      $font-size-lg !default;

$input-btn-border-width:      $border-width !default;
// scss-docs-end input-btn-variables


// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

// scss-docs-start btn-variables
$btn-color:                   $body-color !default;
$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;

$btn-border-width:            $input-btn-border-width !default;

$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;

$btn-link-color:              $link-color !default;
$btn-link-hover-color:        $link-hover-color !default;
$btn-link-disabled-color:     $gray-600 !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius !default;
$btn-border-radius-sm:        $border-radius-sm !default;
$btn-border-radius-lg:        $border-radius-lg !default;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$btn-hover-bg-shade-amount:       15% !default;
$btn-hover-bg-tint-amount:        15% !default;
$btn-hover-border-shade-amount:   20% !default;
$btn-hover-border-tint-amount:    10% !default;
$btn-active-bg-shade-amount:      20% !default;
$btn-active-bg-tint-amount:       20% !default;
$btn-active-border-shade-amount:  25% !default;
$btn-active-border-tint-amount:   10% !default;
// scss-docs-end btn-variables


// Forms

// scss-docs-start form-text-variables
$form-text-margin-top:                  .25rem !default;
$form-text-font-size:                   $small-font-size !default;
$form-text-font-style:                  null !default;
$form-text-font-weight:                 null !default;
$form-text-color:                       $body-secondary-color !default;
// scss-docs-end form-text-variables

// scss-docs-start form-label-variables
$form-label-margin-bottom:              .5rem !default;
$form-label-font-size:                  null !default;
$form-label-font-style:                 null !default;
$form-label-font-weight:                null !default;
$form-label-color:                      null !default;
// scss-docs-end form-label-variables

// scss-docs-start form-input-variables
$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-font-size-sm:                    $input-btn-font-size-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-font-size-lg:                    $input-btn-font-size-lg !default;

$input-bg:                              $body-bg !default;
$input-disabled-color:                  null !default;
$input-disabled-bg:                     $body-secondary-bg !default;
$input-disabled-border-color:           null !default;

$input-color:                           $body-color !default;
$input-border-color:                    $border-color !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      $box-shadow-inset !default;

$input-border-radius:                   $border-radius !default;
$input-border-radius-sm:                $border-radius-sm !default;
$input-border-radius-lg:                $border-radius-lg !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               $body-secondary-color !default;
$input-plaintext-color:                 $body-color !default;

$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$form-color-width:                      3rem !default;
// scss-docs-end form-input-variables

// scss-docs-start form-check-variables
$form-check-input-width:                  1em !default;
$form-check-min-height:                   $font-size-base * $line-height-base !default;
$form-check-padding-start:                0 !default;
$form-check-margin-bottom:                .125rem !default;
$form-check-label-color:                  null !default;
$form-check-label-cursor:                 pointer !default;
$form-check-transition:                   null !default;

$form-check-input-active-filter:          brightness(90%) !default;

$form-check-input-bg:                     $input-bg !default;
$form-check-input-border:                 $border-width solid $border-color !default;
$form-check-input-border-radius:          .25em !default;
$form-check-radio-border-radius:          50% !default;
$form-check-input-focus-border:           $input-focus-border-color !default;
$form-check-input-focus-box-shadow:       $focus-ring-box-shadow !default;

$form-check-input-checked-color:          $component-active-color !default;
$form-check-input-checked-bg-color:       $component-active-bg !default;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

$form-check-input-indeterminate-color:          $component-active-color !default;
$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;

$form-check-input-disabled-opacity:        .5 !default;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;

$form-check-inline-margin-end:    1rem !default;
// scss-docs-end form-check-variables

// scss-docs-start form-switch-variables
$form-switch-color:               rgba($black, .25) !default;
$form-switch-width:               2em !default;
$form-switch-padding-start:       $form-switch-width + .5em !default;
$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-border-radius:       $form-switch-width !default;
$form-switch-transition:          background-position .15s ease-in-out !default;

$form-switch-focus-color:         $input-focus-border-color !default;
$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;

$form-switch-checked-color:       $component-active-color !default;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default;
// scss-docs-end form-switch-variables

// scss-docs-start input-group-variables
$input-group-addon-padding-y:           $input-padding-y !default;
$input-group-addon-padding-x:           $input-padding-x !default;
$input-group-addon-font-weight:         $input-font-weight !default;
$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  $body-tertiary-bg !default;
$input-group-addon-border-color:        $input-border-color !default;
// scss-docs-end input-group-variables

// scss-docs-start form-select-variables
$form-select-padding-y:             $input-padding-y !default;
$form-select-padding-x:             $input-padding-x !default;
$form-select-font-family:           $input-font-family !default;
$form-select-font-size:             $input-font-size !default;
$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
$form-select-font-weight:           $input-font-weight !default;
$form-select-line-height:           $input-line-height !default;
$form-select-color:                 $input-color !default;
$form-select-bg:                    $input-bg !default;
$form-select-disabled-color:        null !default;
$form-select-disabled-bg:           $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position:           right $form-select-padding-x center !default;
$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color:       $gray-800 !default;
$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;

$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;

$form-select-border-width:        $input-border-width !default;
$form-select-border-color:        $input-border-color !default;
$form-select-border-radius:       $input-border-radius !default;
$form-select-box-shadow:          $box-shadow-inset !default;

$form-select-focus-border-color:  $input-focus-border-color !default;
$form-select-focus-width:         $input-focus-width !default;
$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;

$form-select-padding-y-sm:        $input-padding-y-sm !default;
$form-select-padding-x-sm:        $input-padding-x-sm !default;
$form-select-font-size-sm:        $input-font-size-sm !default;
$form-select-border-radius-sm:    $input-border-radius-sm !default;

$form-select-padding-y-lg:        $input-padding-y-lg !default;
$form-select-padding-x-lg:        $input-padding-x-lg !default;
$form-select-font-size-lg:        $input-font-size-lg !default;
$form-select-border-radius-lg:    $input-border-radius-lg !default;

$form-select-transition:          $input-transition !default;
// scss-docs-end form-select-variables

// scss-docs-start form-range-variables
$form-range-track-width:          100% !default;
$form-range-track-height:         .5rem !default;
$form-range-track-cursor:         pointer !default;
$form-range-track-bg:             $body-tertiary-bg !default;
$form-range-track-border-radius:  1rem !default;
$form-range-track-box-shadow:     $box-shadow-inset !default;

$form-range-thumb-width:                   1rem !default;
$form-range-thumb-height:                  $form-range-thumb-width !default;
$form-range-thumb-bg:                      $component-active-bg !default;
$form-range-thumb-border:                  0 !default;
$form-range-thumb-border-radius:           1rem !default;
$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg:             $body-secondary-color !default;
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables

// scss-docs-start form-file-variables
$form-file-button-color:          $input-color !default;
$form-file-button-bg:             $body-tertiary-bg !default;
$form-file-button-hover-bg:       $body-secondary-bg !default;
// scss-docs-end form-file-variables

// scss-docs-start form-floating-variables
$form-floating-height:                  add(3.5rem, $input-height-border) !default;
$form-floating-line-height:             1.25 !default;
$form-floating-padding-x:               $input-padding-x !default;
$form-floating-padding-y:               1rem !default;
$form-floating-input-padding-t:         1.625rem !default;
$form-floating-input-padding-b:         .625rem !default;
$form-floating-label-height:            1.5em !default;
$form-floating-label-opacity:           .65 !default;
$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-label-disabled-color:    $gray-600 !default;
$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
// scss-docs-end form-floating-variables

// Form validation

// scss-docs-start form-feedback-variables
$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $form-text-font-size !default;
$form-feedback-font-style:          $form-text-font-style !default;
$form-feedback-valid-color:         $success !default;
$form-feedback-invalid-color:       $danger !default;

$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
// scss-docs-end form-feedback-variables

// scss-docs-start form-validation-colors
$form-valid-color:                  $form-feedback-valid-color !default;
$form-valid-border-color:           $form-feedback-valid-color !default;
$form-invalid-color:                $form-feedback-invalid-color !default;
$form-invalid-border-color:         $form-feedback-invalid-color !default;
// scss-docs-end form-validation-colors

// scss-docs-start form-validation-states
$form-validation-states: (
  "valid": (
    "color": $form-valid-color,
    "icon": $form-feedback-icon-valid,
    "tooltip-color": #fff,
    "tooltip-bg-color": $success,
    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($success, $input-btn-focus-color-opacity),
    "border-color": $form-valid-border-color,
  ),
  "invalid": (
    "color": $form-invalid-color,
    "icon": $form-feedback-icon-invalid,
    "tooltip-color": #fff,
    "tooltip-bg-color": $danger,
    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity),
    "border-color": $form-invalid-border-color,
  )
) !default;
// scss-docs-end form-validation-states

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

// scss-docs-start zindex-stack
$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-offcanvas-backdrop:         1040 !default;
$zindex-offcanvas:                  1045 !default;
$zindex-modal-backdrop:             1050 !default;
$zindex-modal:                      1055 !default;
$zindex-popover:                    1070 !default;
$zindex-tooltip:                    1080 !default;
$zindex-toast:                      1090 !default;
// scss-docs-end zindex-stack

// scss-docs-start zindex-levels-map
$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
) !default;
// scss-docs-end zindex-levels-map


// Navs

// scss-docs-start nav-variables
$nav-link-padding-y:                ($font-size-base * 0.5) !default;
$nav-link-padding-x:                $font-size-base !default;
$nav-link-font-size:                null !default;
$nav-link-font-weight:              null !default;
$nav-link-color:                    $link-color !default;
$nav-link-hover-color:              $link-hover-color !default;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color:           $body-secondary-color !default;
$nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;

$nav-tabs-border-color:             $border-color !default;
$nav-tabs-border-width:             $border-width !default;
$nav-tabs-border-radius:            $border-radius !default;
$nav-tabs-link-hover-border-color:  $body-secondary-bg $body-secondary-bg $nav-tabs-border-color !default;
$nav-tabs-link-active-color:        $body-emphasis-color !default;
$nav-tabs-link-active-bg:           $body-bg !default;
$nav-tabs-link-active-border-color: $border-color $border-color $nav-tabs-link-active-bg !default;

$nav-pills-border-radius:           $border-radius !default;
$nav-pills-link-active-bg:          $component-active-bg !default;
$nav-pills-link-active-color:       color-contrast($nav-pills-link-active-bg, $component-active-color) !default;

$nav-underline-gap:                 1rem !default;
$nav-underline-border-width:        .125rem !default;
$nav-underline-link-active-color:   $body-emphasis-color !default;
// scss-docs-end nav-variables


// Navbar

// scss-docs-start navbar-variables
$navbar-padding-y:                  $spacer * .5 !default;
$navbar-padding-x:                  null !default;

$navbar-nav-link-padding-x:         .5rem !default;

$navbar-brand-font-size:            $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end:           1rem !default;

$navbar-toggler-padding-y:          .25rem !default;
$navbar-toggler-padding-x:          .75rem !default;
$navbar-toggler-font-size:          $font-size-lg !default;
$navbar-toggler-border-radius:      $btn-border-radius !default;
$navbar-toggler-focus-width:        $btn-focus-width !default;
$navbar-toggler-transition:         box-shadow .15s ease-in-out !default;

$navbar-bg:       null !default; // Background color for any navbarPage()
$navbar-light-bg: if($navbar-bg, $navbar-bg, var(--bs-light)) !default; // Background color for navbarPage(inverse = FALSE)
$navbar-dark-bg:  if($navbar-bg, $navbar-bg, var(--bs-dark)) !default; // Background color for navbarPage(inverse = TRUE)

$navbar-light-contrast: if(
  type-of($navbar-light-bg) == color,
  color-contrast($navbar-light-bg),
  $body-emphasis-color
) !default; // Deepest contrasting color for navbarPage(inverse = FALSE).
$navbar-dark-contrast: if(
  type-of($navbar-dark-bg) == color,
  color-contrast($navbar-dark-bg),
  $body-emphasis-color
) !default; // Deepest contrasting color for navbarPage(inverse = TRUE).

$navbar-light-color:                rgba($navbar-light-contrast, .65) !default;
$navbar-light-hover-color:          rgba($navbar-light-contrast, .8) !default;
$navbar-light-active-color:         rgba($navbar-light-contrast, 1) !default;
$navbar-light-disabled-color:       rgba($navbar-light-contrast, .3) !default;
$navbar-light-icon-color:           rgba(if(type-of($navbar-light-contrast)==color, $navbar-light-contrast, $body-color), .75) !default;
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($navbar-light-contrast, .15) !default;
$navbar-light-brand-color:          $navbar-light-active-color !default;
$navbar-light-brand-hover-color:    $navbar-light-active-color !default;
// scss-docs-end navbar-variables

// scss-docs-start navbar-dark-variables
$navbar-dark-color:                 rgba($navbar-dark-contrast, .55) !default;
$navbar-dark-hover-color:           rgba($navbar-dark-contrast, .75) !default;
$navbar-dark-active-color:          rgba($navbar-dark-contrast, 1) !default;
$navbar-dark-disabled-color:        rgba($navbar-dark-contrast, .25) !default;
$navbar-dark-icon-color:            rgba(if(type-of($navbar-dark-contrast)==color, $navbar-dark-contrast, $white), .75) !default;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color:  rgba($navbar-dark-contrast, .1) !default;
$navbar-dark-brand-color:           $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
// scss-docs-end navbar-dark-variables


// Dropdowns
//
// Dropdown menu container and contents.

// scss-docs-start dropdown-variables
$dropdown-min-width:                10rem !default;
$dropdown-padding-x:                0 !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-font-size:                $font-size-base !default;
$dropdown-color:                    $body-color !default;
$dropdown-bg:                       $body-bg !default;
$dropdown-border-color:             $border-color-translucent !default;
$dropdown-border-radius:            $border-radius !default;
$dropdown-border-width:             $border-width !default;
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color !default;
$dropdown-divider-margin-y:         $spacer * .5 !default;
$dropdown-box-shadow:               $box-shadow !default;

$dropdown-link-color:               $body-color !default;
$dropdown-link-hover-color:         $dropdown-link-color !default;
$dropdown-link-hover-bg:            $body-tertiary-bg !default;

$dropdown-link-active-bg:           $component-active-bg !default;
$dropdown-link-active-color:        color-contrast($dropdown-link-active-bg, $component-active-color) !default;

$dropdown-link-disabled-color:      $body-tertiary-color !default;

$dropdown-item-padding-y:           $spacer * .25 !default;
$dropdown-item-padding-x:           $spacer !default;

$dropdown-header-color:             $gray-600 !default;
$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
$dropdown-header-padding-y:         $dropdown-padding-y !default;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
// fusv-enable
// scss-docs-end dropdown-variables

// scss-docs-start dropdown-dark-variables
$dropdown-dark-color:               $gray-300 !default;
$dropdown-dark-bg:                  $gray-800 !default;
$dropdown-dark-border-color:        $dropdown-border-color !default;
$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
$dropdown-dark-box-shadow:          null !default;
$dropdown-dark-link-color:          $dropdown-dark-color !default;
$dropdown-dark-link-hover-color:    $white !default;
$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color:        $gray-500 !default;
// scss-docs-end dropdown-dark-variables


// Pagination

// scss-docs-start pagination-variables
$pagination-padding-y:              .375rem !default;
$pagination-padding-x:              .75rem !default;
$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .5rem !default;
$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;

$pagination-font-size:              $font-size-base !default;

$pagination-color:                  $link-color !default;
$pagination-bg:                     $body-bg !default;
$pagination-border-radius:          $border-radius !default;
$pagination-border-width:           $border-width !default;
$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color:           $border-color !default;

$pagination-focus-color:            $link-hover-color !default;
$pagination-focus-bg:               $body-secondary-bg !default;
$pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
$pagination-focus-outline:          0 !default;

$pagination-hover-color:            $link-hover-color !default;
$pagination-hover-bg:               $body-tertiary-bg !default;
$pagination-hover-border-color:     $border-color !default; // Todo in v6: remove this?

$pagination-active-color:           $component-active-color !default;
$pagination-active-bg:              $component-active-bg !default;
$pagination-active-border-color:    $component-active-bg !default;

$pagination-disabled-color:         $body-secondary-color !default;
$pagination-disabled-bg:            $body-secondary-bg !default;
$pagination-disabled-border-color:  $border-color !default;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$pagination-border-radius-sm:       $border-radius-sm !default;
$pagination-border-radius-lg:       $border-radius-lg !default;
// scss-docs-end pagination-variables


// Placeholders

// scss-docs-start placeholders
$placeholder-opacity-max:           .5 !default;
$placeholder-opacity-min:           .2 !default;
// scss-docs-end placeholders

// Cards

// scss-docs-start card-variables
$card-spacer-y:                     $spacer !default;
$card-spacer-x:                     $spacer !default;
$card-title-spacer-y:               $spacer * .5 !default;
$card-title-color:                  null !default;
$card-subtitle-color:               null !default;
$card-border-width:                 $border-width !default;
$card-border-color:                 $border-color-translucent !default;
$card-border-radius:                $border-radius !default;
$card-box-shadow:                   null !default;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y:                $card-spacer-y * .5 !default;
$card-cap-padding-x:                $card-spacer-x !default;
$card-cap-bg:                       rgba($body-color, .03) !default;
$card-cap-color:                    null !default;
$card-height:                       null !default;
$card-color:                        null !default;
$card-bg:                           $body-bg !default;
$card-img-overlay-padding:          $spacer !default;
$card-group-margin:                 $grid-gutter-width * .5 !default;
// scss-docs-end card-variables

// Accordion

// scss-docs-start accordion-variables
$accordion-padding-y:                     1rem !default;
$accordion-padding-x:                     1.25rem !default;
$accordion-color:                         $body-color !default;
$accordion-bg:                            $body-bg !default;
$accordion-border-width:                  $border-width !default;
$accordion-border-color:                  $border-color !default;
$accordion-border-radius:                 $border-radius !default;
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;

$accordion-body-padding-y:                $accordion-padding-y !default;
$accordion-body-padding-x:                $accordion-padding-x !default;

$accordion-button-padding-y:              $accordion-padding-y !default;
$accordion-button-padding-x:              $accordion-padding-x !default;
$accordion-button-color:                  $body-color !default;
$accordion-button-bg:                     $accordion-bg !default;
$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg:              $primary-bg-subtle !default;
$accordion-button-active-color:           $primary-text-emphasis !default;

$accordion-button-focus-border-color:     $input-focus-border-color !default;
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;

$accordion-icon-width:                    1.25rem !default;
$accordion-icon-color:                    $body-color !default;
$accordion-icon-active-color:             $primary-text-emphasis !default;
$accordion-icon-transition:               transform .2s ease-in-out !default;
$accordion-icon-transform:                rotate(-180deg) !default;

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// scss-docs-end accordion-variables

// Tooltips

// scss-docs-start tooltip-variables
$tooltip-font-size:                 $font-size-sm !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     $body-bg !default;
$tooltip-bg:                        $body-emphasis-color !default;
$tooltip-border-radius:             $border-radius !default;
$tooltip-opacity:                   .9 !default;
$tooltip-padding-y:                 $spacer * .25 !default;
$tooltip-padding-x:                 $spacer * .5 !default;
$tooltip-margin:                    null !default; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem !default;
$tooltip-arrow-height:              .4rem !default;
// fusv-disable
$tooltip-arrow-color:               null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable
// scss-docs-end tooltip-variables

// Form tooltips must come after regular tooltips
// scss-docs-start tooltip-feedback-variables
$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
$form-feedback-tooltip-line-height:   null !default;
$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-end tooltip-feedback-variables


// Popovers

// scss-docs-start popover-variables
$popover-font-size:                 $font-size-sm !default;
$popover-bg:                        $body-bg !default;
$popover-max-width:                 276px !default;
$popover-border-width:              $border-width !default;
$popover-border-color:              $border-color-translucent !default;
$popover-border-radius:             $border-radius-lg !default;
$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow:                $box-shadow !default;

$popover-header-font-size:          $font-size-base !default;
$popover-header-bg:                 $body-secondary-bg !default;
$popover-header-color:              $headings-color !default;
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          $spacer !default;

$popover-body-color:                $body-color !default;
$popover-body-padding-y:            $spacer !default;
$popover-body-padding-x:            $spacer !default;

$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
// scss-docs-end popover-variables

// fusv-disable
// Deprecated in Bootstrap 5.2.0 for CSS variables
$popover-arrow-color:               $popover-bg !default;
$popover-arrow-outer-color:         $border-color-translucent !default;
// fusv-enable


// Toasts

// scss-docs-start toast-variables
$toast-max-width:                   350px !default;
$toast-padding-x:                   .75rem !default;
$toast-padding-y:                   .5rem !default;
$toast-font-size:                   .875rem !default;
$toast-color:                       null !default;
$toast-background-color:            rgba($body-bg, .85) !default;
$toast-border-width:                $border-width !default;
$toast-border-color:                $border-color-translucent !default;
$toast-border-radius:               $border-radius !default;
$toast-box-shadow:                  $box-shadow !default;
$toast-spacing:                     $container-padding-x !default;

$toast-header-color:                $body-secondary-color !default;
$toast-header-background-color:     rgba($body-bg, .85) !default;
$toast-header-border-color:         $toast-border-color !default;
// scss-docs-end toast-variables


// Badges

// scss-docs-start badge-variables
$badge-font-size:                   .75em !default;
$badge-font-weight:                 $font-weight-bold !default;
$badge-color:                       $white !default;
$badge-padding-y:                   .35em !default;
$badge-padding-x:                   .65em !default;
$badge-border-radius:               $border-radius !default;
// scss-docs-end badge-variables


// Modals

// scss-docs-start modal-variables
$modal-inner-padding:               $spacer !default;

$modal-footer-margin-between:       .5rem !default;

$modal-dialog-margin:               .5rem !default;
$modal-dialog-margin-y-sm-up:       1.75rem !default;

$modal-title-line-height:           $line-height-base !default;

$modal-content-color:               null !default;
$modal-content-bg:                  $body-bg !default;
$modal-content-border-color:        $border-color-translucent !default;
$modal-content-border-width:        $border-width !default;
$modal-content-border-radius:       $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:       $box-shadow-sm !default;
$modal-content-box-shadow-sm-up:    $box-shadow !default;

$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .5 !default;

$modal-header-border-color:         $border-color !default;
$modal-header-border-width:         $modal-content-border-width !default;
$modal-header-padding-y:            $modal-inner-padding !default;
$modal-header-padding-x:            $modal-inner-padding !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility

$modal-footer-bg:                   null !default;
$modal-footer-border-color:         $modal-header-border-color !default;
$modal-footer-border-width:         $modal-header-border-width !default;

$modal-sm:                          300px !default;
$modal-md:                          500px !default;
$modal-lg:                          800px !default;
$modal-xl:                          1140px !default;

$modal-fade-transform:              translate(0, -50px) !default;
$modal-show-transform:              none !default;
$modal-transition:                  transform .3s ease-out !default;
$modal-scale-transform:             scale(1.02) !default;
// scss-docs-end modal-variables


// Alerts
//
// Define alert colors, border radius, and padding.

// scss-docs-start alert-variables
$alert-padding-y:               $spacer !default;
$alert-padding-x:               $spacer !default;
$alert-margin-bottom:           1rem !default;
$alert-border-radius:           $border-radius !default;
$alert-link-font-weight:        $font-weight-bold !default;
$alert-border-width:            $border-width !default;
$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables

// fusv-disable
$alert-bg-scale:                -80% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-border-scale:            -70% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-color-scale:             40% !default; // Deprecated in v5.2.0, to be removed in v6
// fusv-enable

// Progress bars

// scss-docs-start progress-variables
$progress-height:                   1rem !default;
$progress-font-size:                $font-size-base * .75 !default;
$progress-bg:                       $body-secondary-bg !default;
$progress-border-radius:            $border-radius !default;
$progress-box-shadow:               $box-shadow-inset !default;
$progress-bar-color:                $white !default;
$progress-bar-bg:                   $primary !default;
$progress-bar-animation-timing:     1s linear infinite !default;
$progress-bar-transition:           width .6s ease !default;
// scss-docs-end progress-variables


// List group

// scss-docs-start list-group-variables
$list-group-color:                  $body-color !default;
$list-group-bg:                     $body-bg !default;
$list-group-border-color:           $border-color !default;
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;

$list-group-item-padding-y:         $spacer * .5 !default;
$list-group-item-padding-x:         $spacer !default;
// fusv-disable
$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
$list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               $body-tertiary-bg !default;
$list-group-active-bg:              $component-active-bg !default;
$list-group-active-color:           color-contrast($list-group-active-bg, $component-active-color) !default;
$list-group-active-border-color:    $list-group-active-bg !default;

$list-group-disabled-color:         $body-secondary-color !default;
$list-group-disabled-bg:            $list-group-bg !default;

$list-group-action-color:           $body-secondary-color !default;
$list-group-action-hover-color:     $body-emphasis-color !default;

$list-group-action-active-color:    $body-color !default;
$list-group-action-active-bg:       $body-secondary-bg !default;
// scss-docs-end list-group-variables


// Image thumbnails

// scss-docs-start thumbnail-variables
$thumbnail-padding:                 .25rem !default;
$thumbnail-bg:                      $body-bg !default;
$thumbnail-border-width:            $border-width !default;
$thumbnail-border-color:            $border-color !default;
$thumbnail-border-radius:           $border-radius !default;
$thumbnail-box-shadow:              $box-shadow-sm !default;
// scss-docs-end thumbnail-variables


// Figures

// scss-docs-start figure-variables
$figure-caption-font-size:          $small-font-size !default;
$figure-caption-color:              $body-secondary-color !default;
// scss-docs-end figure-variables


// Breadcrumbs

// scss-docs-start breadcrumb-variables
$breadcrumb-font-size:              null !default;
$breadcrumb-padding-y:              0 !default;
$breadcrumb-padding-x:              0 !default;
$breadcrumb-item-padding-x:         .5rem !default;
$breadcrumb-margin-bottom:          1rem !default;
$breadcrumb-bg:                     null !default;
$breadcrumb-divider-color:          $body-secondary-color !default;
$breadcrumb-active-color:           $body-secondary-color !default;
$breadcrumb-divider:                quote("/") !default;
$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
$breadcrumb-border-radius:          null !default;
// scss-docs-end breadcrumb-variables

// Carousel

// scss-docs-start carousel-variables
$carousel-control-color:             $white !default;
$carousel-control-width:             15% !default;
$carousel-control-opacity:           .5 !default;
$carousel-control-hover-opacity:     .9 !default;
$carousel-control-transition:        opacity .15s ease !default;

$carousel-indicator-width:           30px !default;
$carousel-indicator-height:          3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer:          3px !default;
$carousel-indicator-opacity:         .5 !default;
$carousel-indicator-active-bg:       $white !default;
$carousel-indicator-active-opacity:  1 !default;
$carousel-indicator-transition:      opacity .6s ease !default;

$carousel-caption-width:             70% !default;
$carousel-caption-color:             $white !default;
$carousel-caption-padding-y:         1.25rem !default;
$carousel-caption-spacer:            1.25rem !default;

$carousel-control-icon-width:        2rem !default;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;

$carousel-transition-duration:       .6s !default;
$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// scss-docs-end carousel-variables

// scss-docs-start carousel-dark-variables
$carousel-dark-indicator-active-bg:  $black !default;
$carousel-dark-caption-color:        $black !default;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
// scss-docs-end carousel-dark-variables


// Spinners

// scss-docs-start spinner-variables
$spinner-width:           2rem !default;
$spinner-height:          $spinner-width !default;
$spinner-vertical-align:  -.125em !default;
$spinner-border-width:    .25em !default;
$spinner-animation-speed: .75s !default;

$spinner-width-sm:        1rem !default;
$spinner-height-sm:       $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
// scss-docs-end spinner-variables


// Close

// scss-docs-start close-variables
$btn-close-width:            1em !default;
$btn-close-height:           $btn-close-width !default;
$btn-close-padding-x:        .25em !default;
$btn-close-padding-y:        $btn-close-padding-x !default;
$btn-close-color:            $black !default;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
$btn-close-focus-shadow:     $focus-ring-box-shadow !default;
$btn-close-opacity:          .5 !default;
$btn-close-hover-opacity:    .75 !default;
$btn-close-focus-opacity:    1 !default;
$btn-close-disabled-opacity: .25 !default;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
// scss-docs-end close-variables


// Offcanvas

// scss-docs-start offcanvas-variables
$offcanvas-padding-y:               $modal-inner-padding !default;
$offcanvas-padding-x:               $modal-inner-padding !default;
$offcanvas-horizontal-width:        400px !default;
$offcanvas-vertical-height:         30vh !default;
$offcanvas-transition-duration:     .3s !default;
$offcanvas-border-color:            $modal-content-border-color !default;
$offcanvas-border-width:            $modal-content-border-width !default;
$offcanvas-title-line-height:       $modal-title-line-height !default;
$offcanvas-bg-color:                $body-bg !default;
$offcanvas-color:                   $body-color !default;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
// scss-docs-end offcanvas-variables

// Code

$code-font-size:                    $small-font-size !default;
// Amount intentionally matches mixture amount of shiny::inputPanel()
// https://github.com/rstudio/shiny/blob/4eeb4a1/inst/www/shared/shiny_scss/bootstrap.scss#L25
$code-bg:                           $body-emphasis-color !default;
$code-color:                        black !default;
$code-color-dark:                   white !default;

$kbd-padding-y:                     .1875rem !default;
$kbd-padding-x:                     .375rem !default;
$kbd-font-size:                     $code-font-size !default;
$kbd-color:                         $body-bg !default;
$kbd-bg:                            $body-color !default;
$nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6

$pre-bg:                            $code-bg  !default;
$pre-color:                         $body-emphasis-color !default;
$pre-line-height:                   $line-height-base !default;
$font-family-base: Times, "Times New Roman", serif;
$grid-body-width: 7in;





// quarto-scss-analysis-annotation { "origin": "'mixins' section from format" }





// Toggles
//
// Used in conjunction with global variables to enable certain theme features.

// Vendor
@import "vendor/rfs";

// Deprecate
@import "mixins/deprecate";

// Helpers
@import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/visually-hidden";
@import "mixins/reset-text";
@import "mixins/text-truncate";

// Utilities
@import "mixins/utilities";

// Components
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/forms";
@import "mixins/table-variants";

// Skins
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";

// Layout
@import "mixins/clearfix";
@import "mixins/container";
@import "mixins/grid";

@mixin bslib-breakpoints-css-vars(
  $breakpoint-var,
  $breakpoints,
  $allow-cascade: false
) {
  @each $breakpoint in $breakpoints {
    @if not $allow-cascade {
      --#{$breakpoint-var}--#{$breakpoint}: unset;
    }

    @include media-breakpoint-up(#{$breakpoint}) {
      &.#{$breakpoint-var}--#{$breakpoint} {
        --#{$breakpoint-var}: var(--#{$breakpoint-var}--#{$breakpoint});
      }
    }
  }
}


// Intentionally replicates Bootstrap's %heading placeholder
// https://github.com/twbs/bootstrap/blob/2c7f88/scss/_reboot.scss#L83-L96
@mixin bootstrap-heading-font-and-spacing($font-size) {
  @include font-size($font-size);
  margin-top: 0; // 1
  margin-bottom: $headings-margin-bottom;
  font-family: $headings-font-family;
  font-style: $headings-font-style;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;

}

@mixin bootstrap-heading($font-size) {
  @include bootstrap-heading-font-and-spacing($font-size);
  color: var(--#{$prefix}heading-color);
}


// quarto-scss-analysis-annotation { "origin": "'mixins' section from Quarto" }





@mixin body-secondary {
  @if variable-exists(body-secondary) {
    color: $body-secondary;
  } @else {
    color: theme-dim($body-color, 25%);
  }
}

@mixin page-columns {
  display: grid;
  gap: 0;
}

@mixin column-spanning-element {
  table {
    background: $body-bg;
  }
}

// GRID CASCADE
$grid-body-column-max: $grid-body-width !default;
$grid-body-column-min: quarto-math.min(500px, $grid-body-column-max) !default;

// Margin variables
$grid-page-gutter: $grid-column-gutter-width !default;
$grid-page-gutter-start: $grid-page-gutter !default;
$grid-page-gutter-end: $grid-page-gutter !default;

$grid-body-gutter: $grid-column-gutter-width !default;
$grid-body-gutter-start: $grid-body-gutter !default;
$grid-body-gutter-end: $grid-body-gutter !default;

/* FLOATING GRID */
$grid-page-gutter-float: 5fr !default;
$grid-float-sidebar-width: $grid-sidebar-width !default;
$grid-float-margin-width: $grid-margin-width !default;

/* Float Wide Default Grid */

// Margins
$grid-float-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-margin-gutter: $grid-page-gutter-float !default;

// Sidebars
$grid-float-wide-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-sidebar-seg1: minmax(
  #{0.1 * $grid-float-wide-sidebar-width},
  #{0.2 * $grid-float-wide-sidebar-width}
) !default;
$grid-float-wide-sidebar-seg2: minmax(
  #{0.2 * $grid-float-wide-sidebar-width},
  #{0.6 * $grid-float-wide-sidebar-width}
) !default;
$grid-float-wide-sidebar-seg3: minmax(
  #{0.1 * $grid-float-wide-sidebar-width},
  #{0.2 * $grid-float-wide-sidebar-width}
) !default;

// Margins
$grid-float-wide-margin-width: $grid-float-margin-width !default;
$grid-float-wide-margin-seg3: minmax(
  #{0.1 * $grid-float-wide-margin-width},
  #{0.2 * $grid-float-wide-margin-width}
) !default;
$grid-float-wide-margin-seg2: minmax(
  #{0.2 * $grid-float-wide-margin-width},
  #{0.6 * $grid-float-wide-margin-width}
) !default;
$grid-float-wide-margin-seg1: minmax(
  #{0.1 * $grid-float-wide-margin-width},
  #{0.2 * $grid-float-wide-margin-width}
) !default;

// Body
$grid-float-wide-body-column-min: $grid-body-column-min !default;
$grid-float-wide-body-column-max: $grid-body-column-max !default;
$grid-float-wide-body: minmax(
  $grid-float-wide-body-column-min,
  calc(
    #{$grid-float-wide-body-column-max} - #{$grid-float-wide-page-gutter-start +
      $grid-float-wide-page-gutter-end}
  )
) !default;

/* Float Wide Slim Content Grid */

// Margins
$grid-float-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-slim-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-slim-margin-gutter: $grid-page-gutter-float !default;

// Sidebars
$grid-float-wide-slim-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-slim-sidebar-seg1: 0.2 * $grid-float-wide-slim-sidebar-width !default;
$grid-float-wide-slim-sidebar-seg2: minmax(
  #{0.2 * $grid-float-wide-slim-sidebar-width},
  #{0.6 * $grid-float-wide-slim-sidebar-width}
) !default;
$grid-float-wide-slim-sidebar-seg3: 0.2 * $grid-float-wide-slim-sidebar-width !default;

// Margins
$grid-float-wide-slim-margin-width: $grid-float-margin-width !default;
$grid-float-wide-slim-margin-seg3: 0.2 * $grid-float-wide-slim-margin-width !default;
$grid-float-wide-slim-margin-seg2: minmax(
  #{0.2 * $grid-float-wide-slim-margin-width},
  #{0.6 * $grid-float-wide-slim-margin-width}
) !default;
$grid-float-wide-slim-margin-seg1: 0.2 * $grid-float-wide-slim-margin-width !default;

// Body
$grid-float-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
$grid-float-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-wide-slim-body: minmax(
  $grid-float-wide-slim-body-column-min,
  calc(
    #{$grid-float-wide-slim-body-column-max} - #{$grid-float-wide-slim-page-gutter-start +
      $grid-float-wide-slim-page-gutter-end}
  )
) !default;

/* Float Wide Full Grid */
// Margins
$grid-float-wide-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-full-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-full-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-full-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-full-margin-gutter: $grid-page-gutter-float !default;

// Sidebars
$grid-float-wide-full-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-full-sidebar-seg1: 0.2 * $grid-float-wide-full-sidebar-width !default;
$grid-float-wide-full-sidebar-seg2: minmax(
  #{0.2 * $grid-float-wide-full-sidebar-width},
  #{0.6 * $grid-float-wide-full-sidebar-width}
) !default;
$grid-float-wide-full-sidebar-seg3: 0.2 * $grid-float-wide-full-sidebar-width !default;

// Margins
$grid-float-wide-full-margin-width: $grid-float-margin-width !default;
$grid-float-wide-full-margin-seg3: 0.2 * $grid-float-wide-full-margin-width !default;
$grid-float-wide-full-margin-seg2: minmax(
  #{0.2 * $grid-float-wide-full-margin-width},
  #{0.6 * $grid-float-wide-full-margin-width}
) !default;
$grid-float-wide-full-margin-seg1: 0.2 * $grid-float-wide-full-margin-width !default;

// Body
$grid-float-wide-full-body-column-min: $grid-body-column-min !default;
$grid-float-wide-full-body-column-max: $grid-body-column-max !default;
$grid-float-wide-full-body: minmax(
  $grid-float-wide-full-body-column-min,
  calc(
    #{$grid-float-wide-full-body-column-max} - #{$grid-float-wide-full-page-gutter-start +
      $grid-float-wide-full-page-gutter-end}
  )
) !default;

/* Float Wide Listing Grid */
// Margins
$grid-float-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-listing-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-listing-margin-gutter: $grid-page-gutter-float !default;

// Sidebars
$grid-float-wide-listing-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-listing-sidebar-seg1: minmax(
  #{0.1 * $grid-float-wide-listing-sidebar-width},
  #{0.2 * $grid-float-wide-listing-sidebar-width}
) !default;
$grid-float-wide-listing-sidebar-seg2: minmax(
  #{0.2 * $grid-float-wide-listing-sidebar-width},
  #{0.6 * $grid-float-wide-listing-sidebar-width}
) !default;
$grid-float-wide-listing-sidebar-seg3: minmax(
  #{0.1 * $grid-float-wide-listing-sidebar-width},
  #{0.2 * $grid-float-wide-listing-sidebar-width}
) !default;

// Margins
$grid-float-wide-listing-margin-width: $grid-float-margin-width !default;
$grid-float-wide-listing-margin-seg3: minmax(
  #{0.1 * $grid-float-wide-listing-margin-width},
  #{0.2 * $grid-float-wide-listing-margin-width}
) !default;
$grid-float-wide-listing-margin-seg2: minmax(
  #{0.2 * $grid-float-wide-listing-margin-width},
  #{0.6 * $grid-float-wide-listing-margin-width}
) !default;
$grid-float-wide-listing-margin-seg1: minmax(
  #{0.1 * $grid-float-wide-listing-margin-width},
  #{0.2 * $grid-float-wide-listing-margin-width}
) !default;

// Body
$grid-float-wide-listing-body-column-min: $grid-body-column-min !default;
$grid-float-wide-listing-body-column-max: $grid-body-column-max !default;
$grid-float-wide-listing-body: minmax(
  $grid-float-wide-listing-body-column-min,
  calc(
    #{$grid-float-wide-listing-body-column-max} - #{$grid-float-wide-listing-page-gutter-start +
      $grid-float-wide-listing-page-gutter-end}
  )
) !default;

/* Float Mid Default Grid */
// Margins
$grid-float-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-margin-gutter: $grid-page-gutter-float !default;

// No sidebar, only margins
$grid-float-mid-margin-width: $grid-float-margin-width !default;
$grid-float-mid-margin-seg3: 0.2 * $grid-float-mid-margin-width !default;
$grid-float-mid-margin-seg2: minmax(
  #{0.3 * $grid-float-mid-margin-width},
  #{0.6 * $grid-float-mid-margin-width}
) !default;
$grid-float-mid-margin-seg1: 0.1 * $grid-float-mid-margin-width !default;

// Body
$grid-float-mid-body-column-min: $grid-body-column-min !default;
$grid-float-mid-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-mid-body: minmax(
  $grid-float-mid-body-column-min,
  calc(
    #{$grid-float-mid-body-column-max} - #{$grid-float-mid-page-gutter-start + $grid-float-mid-page-gutter-end}
  )
) !default;

/* Float Mid Slim Content Grid */
// Margins
$grid-float-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-slim-body-gutter-start: 2 *
  quarto-math.div($grid-body-gutter-start, 3) !default;
$grid-float-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-slim-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-slim-margin-gutter: 0.8 * $grid-page-gutter-float !default;

// No sidebar, only margins
$grid-float-mid-slim-margin-width: $grid-float-margin-width !default;
$grid-float-mid-slim-margin-seg3: 0.14 * $grid-float-mid-slim-margin-width !default;
$grid-float-mid-slim-margin-seg2: minmax(
  #{0.3 * $grid-float-mid-slim-margin-width},
  #{0.58 * $grid-float-mid-slim-margin-width}
) !default;
$grid-float-mid-slim-margin-seg1: 0.14 * $grid-float-mid-slim-margin-width !default;

// Body
$grid-float-mid-slim-body-column-min: $grid-body-column-min !default;
$grid-float-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-mid-slim-body: minmax(
  $grid-float-mid-slim-body-column-min,
  calc(
    #{$grid-float-mid-slim-body-column-max} - #{$grid-float-mid-slim-page-gutter-start +
      $grid-float-mid-slim-page-gutter-end}
  )
) !default;

/* Float Mid Full Content Grid */
// Margins
$grid-float-mid-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-full-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-full-body-gutter-start: 2 *
  quarto-math.div($grid-body-gutter-start, 3) !default;
$grid-float-mid-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-full-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-full-margin-gutter: 0.8 * $grid-page-gutter-float !default;

// No sidebar or margins

// Body
$grid-float-mid-full-body-column-min: $grid-body-column-min !default;
$grid-float-mid-full-body-column-max: $grid-body-column-max !default;
$grid-float-mid-full-body: minmax(
  $grid-float-mid-full-body-column-min,
  calc(
    #{$grid-float-mid-full-body-column-max} - #{$grid-float-mid-full-page-gutter-start +
      $grid-float-mid-full-page-gutter-end}
  )
) !default;

/* Float Mid Listing Content Grid */
// Margins
$grid-float-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-listing-body-gutter-start: 2 *
  quarto-math.div($grid-body-gutter-start, 3) !default;
$grid-float-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-listing-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-listing-margin-gutter: 0.8 * $grid-page-gutter-float !default;

// No sidebar, only margins
$grid-float-mid-listing-margin-width: $grid-float-margin-width !default;
$grid-float-mid-listing-margin-seg3: 0.2 * $grid-float-mid-listing-margin-width !default;
$grid-float-mid-listing-margin-seg2: minmax(
  #{0.3 * $grid-float-mid-listing-margin-width},
  #{0.6 * $grid-float-mid-listing-margin-width}
) !default;
$grid-float-mid-listing-margin-seg1: 0.1 * $grid-float-mid-listing-margin-width !default;

// Body
$grid-float-mid-listing-body-column-min: $grid-body-column-min !default;
$grid-float-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-mid-listing-body: minmax(
  $grid-float-mid-listing-body-column-min,
  calc(
    #{$grid-float-mid-listing-body-column-max} - #{$grid-float-mid-listing-page-gutter-start +
      $grid-float-mid-listing-page-gutter-end}
  )
) !default;

/* DOCKED GRID */
$grid-docked-sidebar-width: $grid-sidebar-width !default;
$grid-docked-margin-width: $grid-margin-width !default;
$grid-docked-body-width: $grid-body-column-max + 200px !default;

/* Docked Wide Default Grid */

// Margins
$grid-docked-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-page-gutter-end: $grid-page-gutter-end !default;
$grid-docked-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-margin-gutter: 5fr !default;

// Sidebars
$grid-docked-wide-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-sidebar-seg1: minmax(
  #{0.2 * $grid-docked-wide-sidebar-width},
  #{0.4 * $grid-docked-wide-sidebar-width}
) !default;
$grid-docked-wide-sidebar-seg2: 0.2 * $grid-docked-wide-sidebar-width !default;
$grid-docked-wide-sidebar-seg3: 0.2 * $grid-docked-wide-sidebar-width !default;

// Margins
$grid-docked-wide-margin-width: $grid-docked-margin-width !default;
$grid-docked-wide-margin-seg3: 0.2 * $grid-docked-wide-margin-width !default;
$grid-docked-wide-margin-seg2: minmax(
  #{0.2 * $grid-docked-wide-margin-width},
  #{0.4 * $grid-docked-wide-margin-width}
) !default;
$grid-docked-wide-margin-seg1: 0.2 * $grid-docked-wide-margin-width !default;

// Body
$grid-docked-wide-body-column-min: $grid-body-column-min !default;
$grid-docked-wide-body-column-max: $grid-docked-body-width !default;
$grid-docked-wide-body: minmax(
  $grid-docked-wide-body-column-min,
  calc(
    #{$grid-docked-wide-body-column-max} - #{$grid-docked-wide-page-gutter-start +
      $grid-docked-wide-page-gutter-end}
  )
) !default;

/* Docked Slim Content Grid */

// Margins
$grid-docked-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
$grid-docked-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-slim-margin-gutter: 5fr !default;

// Sidebars
$grid-docked-wide-slim-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-slim-sidebar-seg1: minmax(
  #{0.2 * $grid-docked-wide-slim-sidebar-width},
  #{0.4 * $grid-docked-wide-slim-sidebar-width}
) !default;
$grid-docked-wide-slim-sidebar-seg2: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
$grid-docked-wide-slim-sidebar-seg3: 0.2 * $grid-docked-wide-slim-sidebar-width !default;

// Margins
$grid-docked-wide-slim-margin-width: $grid-docked-margin-width !default;
$grid-docked-wide-slim-margin-seg3: 0.2 * $grid-docked-wide-slim-margin-width !default;
$grid-docked-wide-slim-margin-seg2: minmax(
  #{0 * $grid-docked-wide-slim-margin-width},
  #{0.8 * $grid-docked-wide-slim-margin-width}
) !default;
$grid-docked-wide-slim-margin-seg1: 0.2 * $grid-docked-wide-slim-margin-width !default;

// Body
$grid-docked-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
$grid-docked-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-wide-slim-body: minmax(
  $grid-docked-wide-slim-body-column-min,
  calc(
    #{$grid-docked-wide-slim-body-column-max} - #{$grid-docked-wide-slim-page-gutter-start +
      $grid-docked-wide-slim-page-gutter-end}
  )
) !default;

/* Docked Full Content Grid */

// Margins
$grid-docked-wide-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-full-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-full-margin-gutter: 5fr !default;
$grid-docked-wide-full-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-docked-wide-full-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-full-sidebar-seg1: minmax(
  #{0.2 * $grid-docked-wide-full-sidebar-width},
  #{0.4 * $grid-docked-wide-full-sidebar-width}
) !default;
$grid-docked-wide-full-sidebar-seg2: 0.2 * $grid-docked-wide-full-sidebar-width !default;
$grid-docked-wide-full-sidebar-seg3: 0.2 * $grid-docked-wide-full-sidebar-width !default;

// No Margins

// Body
$grid-docked-wide-full-body-column-min: $grid-body-column-min !default;
$grid-docked-wide-full-body-column-max: $grid-docked-body-width !default;
$grid-docked-wide-full-body: minmax(
  $grid-docked-wide-full-body-column-min,
  calc(
    #{$grid-docked-wide-full-body-column-max} - #{$grid-docked-wide-full-page-gutter-start +
      $grid-docked-wide-full-page-gutter-end}
  )
) !default;

/* Docked Listing Grid */

// Margins
$grid-docked-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-listing-margin-gutter: 5fr !default;
$grid-docked-wide-listing-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-docked-wide-listing-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-listing-sidebar-seg1: minmax(
  #{0.2 * $grid-docked-wide-listing-sidebar-width},
  #{0.4 * $grid-docked-wide-listing-sidebar-width}
) !default;
$grid-docked-wide-listing-sidebar-seg2: 0.2 *
  $grid-docked-wide-listing-sidebar-width !default;
$grid-docked-wide-listing-sidebar-seg3: 0.2 *
  $grid-docked-wide-listing-sidebar-width !default;

// Margins
$grid-docked-wide-listing-margin-width: $grid-docked-margin-width !default;
$grid-docked-wide-listing-margin-seg3: 0.2 *
  $grid-docked-wide-listing-margin-width !default;
$grid-docked-wide-listing-margin-seg2: minmax(
  #{0 * $grid-docked-wide-listing-margin-width},
  #{0.8 * $grid-docked-wide-listing-margin-width}
) !default;
$grid-docked-wide-listing-margin-seg1: 0.2 *
  $grid-docked-wide-listing-margin-width !default;

// Body
$grid-docked-wide-listing-body-column-min: $grid-body-column-min !default;
$grid-docked-wide-listing-body-column-max: $grid-docked-body-width !default;
$grid-docked-wide-listing-body: minmax(
  $grid-docked-wide-listing-body-column-min,
  calc(
    #{$grid-docked-wide-listing-body-column-max} - #{$grid-docked-wide-listing-page-gutter-start +
      $grid-docked-wide-listing-page-gutter-end}
  )
) !default;

/* Docked Mid Default Grid */
// Margins
$grid-docked-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-margin-gutter: 5fr !default;
$grid-docked-mid-page-gutter-end: $grid-page-gutter-end !default;

// No sidebar, only margins
$grid-docked-mid-margin-width: $grid-docked-margin-width !default;
$grid-docked-mid-margin-seg3: 0.2 * $grid-docked-mid-margin-width !default;
$grid-docked-mid-margin-seg2: minmax(
  #{0.1 * $grid-docked-mid-margin-width},
  #{0.2 * $grid-docked-mid-margin-width}
) !default;
$grid-docked-mid-margin-seg1: 0.2 * $grid-docked-mid-margin-width !default;

// Body
$grid-docked-mid-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-mid-body: minmax(
  $grid-docked-mid-body-column-min,
  calc(
    #{$grid-docked-mid-body-column-max} - #{$grid-docked-mid-page-gutter-start +
      $grid-docked-mid-page-gutter-end}
  )
) !default;

/* Docked Mid Slim Content Grid */
// Margins
$grid-docked-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-slim-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-slim-margin-gutter: 5fr !default;
$grid-docked-mid-slim-page-gutter-end: $grid-page-gutter-end !default;

// No sidebar, only margins
$grid-docked-mid-slim-margin-width: $grid-docked-margin-width !default;
$grid-docked-mid-slim-margin-seg3: 0.2 * $grid-docked-mid-slim-margin-width !default;
$grid-docked-mid-slim-margin-seg2: minmax(
  #{0.1 * $grid-docked-mid-slim-margin-width},
  #{0.2 * $grid-docked-mid-slim-margin-width}
) !default;
$grid-docked-mid-slim-margin-seg1: 0.2 * $grid-docked-mid-slim-margin-width !default;

// Body
$grid-docked-mid-slim-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-mid-slim-body: minmax(
  $grid-docked-mid-slim-body-column-min,
  calc(
    #{$grid-docked-mid-slim-body-column-max} - #{$grid-docked-mid-slim-page-gutter-start +
      $grid-docked-mid-slim-page-gutter-end}
  )
) !default;

/* Docked Mid Full Content Grid */
// Margins
$grid-docked-mid-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-full-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-full-margin-gutter: 5fr !default;
$grid-docked-mid-full-page-gutter-end: $grid-page-gutter-end !default;

// No sidebar or margins

// Body
$grid-docked-mid-full-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-full-body-column-max: $grid-docked-body-width !default;
$grid-docked-mid-full-body: minmax(
  $grid-docked-mid-full-body-column-min,
  calc(
    #{$grid-docked-mid-full-body-column-max} - #{$grid-docked-mid-full-page-gutter-start +
      $grid-docked-mid-full-page-gutter-end}
  )
) !default;

/* Float Mid Listing Content Grid */
// Margins
$grid-docked-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-listing-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-listing-margin-gutter: $grid-page-gutter-float !default;
$grid-docked-mid-listing-page-gutter-end: $grid-page-gutter-end !default;

// No sidebar, only margins
$grid-docked-mid-listing-margin-width: $grid-docked-margin-width !default;
$grid-docked-mid-listing-margin-seg3: 0.2 *
  $grid-docked-mid-listing-margin-width !default;
$grid-docked-mid-listing-margin-seg2: minmax(
  #{0.3 * $grid-docked-mid-listing-margin-width},
  #{0.6 * $grid-docked-mid-listing-margin-width}
) !default;
$grid-docked-mid-listing-margin-seg1: 0.1 *
  $grid-docked-mid-listing-margin-width !default;

// Body
$grid-docked-mid-listing-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-mid-listing-body: minmax(
  $grid-docked-mid-listing-body-column-min,
  calc(
    #{$grid-docked-mid-listing-body-column-max} - #{$grid-docked-mid-listing-page-gutter-start +
      $grid-docked-mid-listing-page-gutter-end}
  )
) !default;

/* DEFAULT (HTML PAGE, NOT IN WEBSITE) GRID */
$grid-default-sidebar-width: $grid-sidebar-width !default;
$grid-default-margin-width: $grid-margin-width !default;
$grid-default-body-width: $grid-body-column-max + 50px !default;

/* Default Wide Grid */
// Margins
$grid-default-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-wide-sidebar-gutter: 5fr !default;
$grid-default-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-wide-margin-gutter: 5fr !default;
$grid-default-wide-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-default-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-wide-sidebar-seg1: 0.14 * $grid-default-wide-sidebar-width !default;
$grid-default-wide-sidebar-seg2: 0.14 * $grid-default-wide-sidebar-width !default;

// Margins
$grid-default-wide-margin-width: $grid-default-margin-width !default;
$grid-default-wide-margin-seg3: 0.14 * $grid-default-wide-margin-width !default;
$grid-default-wide-margin-seg2: minmax(
  #{0.3 * $grid-default-wide-margin-width},
  #{0.58 * $grid-default-wide-margin-width}
) !default;
$grid-default-wide-margin-seg1: 0.14 * $grid-default-wide-margin-width !default;

// Body
$grid-default-wide-body-column-min: $grid-body-column-min !default;
$grid-default-wide-body-column-max: $grid-default-body-width !default;
$grid-default-wide-body: minmax(
  $grid-default-wide-body-column-min,
  calc(
    #{$grid-default-wide-body-column-max} - #{$grid-default-wide-page-gutter-start +
      $grid-default-wide-page-gutter-end}
  )
) !default;

/* Default Mid Grid */
// Margins
$grid-default-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-mid-sidebar-gutter: 5fr !default;
$grid-default-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-mid-margin-gutter: 5fr !default;
$grid-default-mid-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-default-mid-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-mid-sidebar-seg1: 0.14 * $grid-default-mid-sidebar-width !default;
$grid-default-mid-sidebar-seg2: 0.14 * $grid-default-mid-sidebar-width !default;

// Margins
$grid-default-mid-margin-width: $grid-default-margin-width !default;
$grid-default-mid-margin-seg3: 0.14 * $grid-default-mid-margin-width !default;
$grid-default-mid-margin-seg2: minmax(
  #{0.3 * $grid-default-mid-margin-width},
  #{0.58 * $grid-default-mid-margin-width}
) !default;
$grid-default-mid-margin-seg1: 0.14 * $grid-default-mid-margin-width !default;

// Body
$grid-default-mid-body-column-min: $grid-body-column-min !default;
$grid-default-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-mid-body: minmax(
  $grid-default-mid-body-column-min,
  calc(
    #{$grid-default-mid-body-column-max} - #{$grid-default-mid-page-gutter-start +
      $grid-default-mid-page-gutter-end}
  )
) !default;

/* Full Content Wide Grid */
// Margins
$grid-default-full-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-full-wide-sidebar-gutter: 5fr !default;
$grid-default-full-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-full-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-full-wide-margin-gutter: 5fr !default;
$grid-default-full-wide-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-default-full-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-full-wide-sidebar-seg1: 0.14 *
  $grid-default-full-wide-sidebar-width !default;
$grid-default-full-wide-sidebar-seg2: 0.14 *
  $grid-default-full-wide-sidebar-width !default;

// Margins
$grid-default-full-wide-margin-width: $grid-default-margin-width !default;
$grid-default-full-wide-margin-seg2: 0.14 * $grid-default-full-wide-margin-width !default;
$grid-default-full-wide-margin-seg1: 0.14 * $grid-default-full-wide-margin-width !default;

// Body
$grid-default-full-wide-body-column-min: $grid-body-column-min !default;
$grid-default-full-wide-body-column-max: $grid-default-body-width !default;
$grid-default-full-wide-body: minmax(
  $grid-default-full-wide-body-column-min,
  calc(
    #{$grid-default-full-wide-body-column-max} - #{$grid-default-full-wide-page-gutter-start +
      $grid-default-full-wide-page-gutter-end}
  )
) !default;

/* Full Content Mid Grid */
// Margins
$grid-default-full-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-full-mid-sidebar-gutter: 5fr !default;
$grid-default-full-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-full-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-full-mid-margin-gutter: 5fr !default;
$grid-default-full-mid-page-gutter-end: $grid-page-gutter-end !default;

// No margins or sidebars

// Body
$grid-default-full-mid-body-column-min: $grid-body-column-min !default;
$grid-default-full-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-full-mid-body: minmax(
  $grid-default-full-mid-body-column-min,
  calc(
    #{$grid-default-full-mid-body-column-max} - #{$grid-default-full-mid-page-gutter-start +
      $grid-default-full-mid-page-gutter-end}
  )
) !default;

/* Listing Wide Grid */
// Margins
$grid-default-listing-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-listing-wide-sidebar-gutter: 5fr !default;
$grid-default-listing-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-listing-wide-body-gutter-end: 2 * $grid-body-gutter-end !default;
$grid-default-listing-wide-margin-gutter: 1fr !default;
$grid-default-listing-wide-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-default-listing-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-listing-wide-sidebar-seg1: minmax(
  #{0.2 * $grid-default-listing-wide-sidebar-width},
  #{0.4 * $grid-default-listing-wide-sidebar-width}
) !default;
$grid-default-listing-wide-sidebar-seg2: 0.2 *
  $grid-default-listing-wide-sidebar-width !default;
$grid-default-listing-wide-sidebar-seg3: 0.2 *
  $grid-default-listing-wide-sidebar-width !default;

// Margins
$grid-default-listing-wide-margin-width: $grid-default-margin-width !default;
$grid-default-listing-wide-sidebar-seg3: 0.2 *
  $grid-default-listing-wide-margin-width !default;
$grid-default-listing-wide-margin-seg2: minmax(
  #{0 * $grid-default-listing-wide-margin-width},
  #{1 * $grid-default-listing-wide-margin-width}
) !default;
$grid-default-listing-wide-margin-seg1: 0.2 *
  $grid-default-listing-wide-margin-width !default;

// Body
$grid-default-listing-wide-body-column-min: $grid-body-column-min !default;
$grid-default-listing-wide-body-column-max: $grid-default-body-width !default;
$grid-default-listing-wide-body: minmax(
  $grid-default-listing-wide-body-column-min,
  calc(
    #{$grid-default-listing-wide-body-column-max} - #{$grid-default-listing-wide-page-gutter-start +
      $grid-default-listing-wide-page-gutter-end}
  )
) !default;

/* Listing Mid Grid */
// Margins
$grid-default-listing-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-listing-mid-sidebar-gutter: 5fr !default;
$grid-default-listing-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-listing-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-listing-mid-margin-gutter: 5fr !default;
$grid-default-listing-mid-page-gutter-end: $grid-page-gutter-end !default;

// No margins or sidebars

// Body
$grid-default-listing-mid-body-column-min: $grid-body-column-min !default;
$grid-default-listing-mid-body-column-max: $grid-default-body-width + 400px !default;
$grid-default-listing-mid-body: minmax(
  $grid-default-listing-mid-body-column-min,
  calc(
    #{$grid-default-listing-mid-body-column-max} - #{$grid-default-listing-mid-page-gutter-start +
      $grid-default-listing-mid-page-gutter-end}
  )
) !default;

/* Slim Wide Grid */
// Margins
$grid-default-slim-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-slim-wide-sidebar-gutter: 5fr !default;
$grid-default-slim-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-slim-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-slim-wide-margin-gutter: 5fr !default;
$grid-default-slim-wide-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-default-slim-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-slim-wide-sidebar-seg1: 0.14 *
  $grid-default-slim-wide-sidebar-width !default;
$grid-default-slim-wide-sidebar-seg2: 0.14 *
  $grid-default-slim-wide-sidebar-width !default;

// Margins
$grid-default-slim-wide-margin-width: $grid-default-margin-width !default;
$grid-default-slim-wide-sidebar-seg3: 0.2 * $grid-default-slim-wide-margin-width !default;
$grid-default-slim-wide-margin-seg2: minmax(
  #{0 * $grid-default-slim-wide-margin-width},
  #{0.8 * $grid-default-slim-wide-margin-width}
) !default;
$grid-default-slim-wide-margin-seg1: 0.2 * $grid-default-slim-wide-margin-width !default;

// Body
$grid-default-slim-wide-body-column-min: $grid-body-column-min !default;
$grid-default-slim-wide-body-column-max: $grid-default-body-width !default;
$grid-default-slim-wide-body: minmax(
  $grid-default-slim-wide-body-column-min,
  calc(
    #{$grid-default-slim-wide-body-column-max} - #{$grid-default-slim-wide-page-gutter-start +
      $grid-default-slim-wide-page-gutter-end}
  )
) !default;

/* Slim Mid Grid */
// Margins
$grid-default-slim-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-slim-mid-sidebar-gutter: 5fr !default;
$grid-default-slim-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-slim-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-slim-mid-margin-gutter: 5fr !default;
$grid-default-slim-mid-page-gutter-end: $grid-page-gutter-end !default;

// Margins
$grid-default-slim-mid-margin-width: $grid-default-margin-width !default;
$grid-default-slim-mid-margin-seg3: 0.14 * $grid-default-slim-mid-margin-width !default;
$grid-default-slim-mid-margin-seg2: minmax(
  #{0.3 * $grid-default-slim-mid-margin-width},
  #{0.58 * $grid-default-slim-mid-margin-width}
) !default;
$grid-default-slim-mid-margin-seg1: 0.14 * $grid-default-slim-mid-margin-width !default;

// Body
$grid-default-slim-mid-body-column-min: $grid-body-column-min !default;
$grid-default-slim-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-slim-mid-body: minmax(
  $grid-default-slim-mid-body-column-min,
  calc(
    #{$grid-default-slim-mid-body-column-max} - #{$grid-default-slim-mid-page-gutter-start +
      $grid-default-slim-mid-page-gutter-end}
  )
) !default;

/* TOC Wide Grid */
// Margins
$grid-default-toc-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-toc-wide-sidebar-gutter: 5fr !default;
$grid-default-toc-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-toc-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-toc-wide-margin-gutter: 5fr !default;
$grid-default-toc-wide-page-gutter-end: $grid-page-gutter-end !default;

// Sidebars
$grid-default-toc-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-toc-wide-sidebar-seg1: 0.14 * $grid-default-toc-wide-sidebar-width !default;
$grid-default-toc-wide-sidebar-seg2: minmax(
  #{0 * $grid-default-toc-wide-sidebar-width},
  #{0.7 * $grid-default-toc-wide-sidebar-width}
) !default;
$grid-default-toc-wide-sidebar-seg3: 0.14 * $grid-default-toc-wide-sidebar-width !default;

// Margins
$grid-default-toc-wide-margin-width: $grid-default-margin-width !default;
$grid-default-toc-wide-margin-seg3: 0.2 * $grid-default-toc-wide-margin-width !default;
$grid-default-toc-wide-margin-seg2: minmax(
  #{0 * $grid-default-toc-wide-margin-width},
  #{0.8 * $grid-default-toc-wide-margin-width}
) !default;
$grid-default-toc-wide-margin-seg1: 0.2 * $grid-default-toc-wide-margin-width !default;

// Body
$grid-default-toc-wide-body-column-min: $grid-body-column-min - 50px !default;
$grid-default-toc-wide-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-toc-wide-body: minmax(
  $grid-default-toc-wide-body-column-min,
  calc(
    #{$grid-default-toc-wide-body-column-max} - #{$grid-default-toc-wide-page-gutter-start +
      $grid-default-toc-wide-page-gutter-end}
  )
) !default;

/* TOC Mid Grid */
// Margins
$grid-default-toc-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-toc-mid-sidebar-gutter: 5fr !default;
$grid-default-toc-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-toc-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-toc-mid-margin-gutter: 5fr !default;
$grid-default-toc-mid-page-gutter-end: $grid-page-gutter-end !default;

// Margins
$grid-default-toc-mid-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-toc-mid-sidebar-seg1: 0.14 * $grid-default-toc-mid-sidebar-width !default;
$grid-default-toc-mid-sidebar-seg2: minmax(
  #{0 * $grid-default-toc-mid-sidebar-width},
  #{0.58 * $grid-default-toc-mid-sidebar-width}
) !default;
$grid-default-toc-mid-sidebar-seg3: 0.14 * $grid-default-toc-mid-sidebar-width !default;

// Body
$grid-default-toc-mid-body-column-min: $grid-body-column-min - 50px !default;
$grid-default-toc-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-toc-mid-body: minmax(
  $grid-default-toc-mid-body-column-min,
  calc(
    #{$grid-default-toc-mid-body-column-max} - #{$grid-default-toc-mid-page-gutter-start +
      $grid-default-toc-mid-page-gutter-end}
  )
) !default;

// Floating Grid Definitions
@mixin page-columns-float-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-wide-page-gutter-start
    [screen-start-inset] $grid-float-wide-sidebar-gutter
    [page-start] $grid-float-wide-sidebar-seg1
    [page-start-inset] $grid-float-wide-sidebar-seg2
    [body-start-outset] $grid-float-wide-sidebar-seg3
    [body-start] $grid-float-wide-body-gutter-start
    [body-content-start] $grid-float-wide-body
    [body-content-end] $grid-float-wide-body-gutter-end
    [body-end] $grid-float-wide-margin-seg3
    [body-end-outset] $grid-float-wide-margin-seg2
    [page-end-inset] $grid-float-wide-margin-seg1
    [page-end] $grid-float-wide-margin-gutter
    [screen-end-inset] $grid-float-wide-page-gutter-end
    [screen-end];
}

@mixin page-columns-float-slimcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-wide-slim-page-gutter-start
    [screen-start-inset] $grid-float-wide-slim-sidebar-gutter
    [page-start] $grid-float-wide-slim-sidebar-seg1
    [page-start-inset] $grid-float-wide-slim-sidebar-seg2
    [body-start-outset] $grid-float-wide-slim-sidebar-seg3
    [body-start] $grid-float-wide-slim-body-gutter-start
    [body-content-start] $grid-float-wide-slim-body
    [body-content-end] $grid-float-wide-slim-body-gutter-end
    [body-end] $grid-float-wide-slim-margin-seg3
    [body-end-outset] $grid-float-wide-slim-margin-seg2
    [page-end-inset] $grid-float-wide-slim-margin-seg1
    [page-end] $grid-float-wide-slim-margin-gutter
    [screen-end-inset] $grid-float-wide-slim-page-gutter-end
    [screen-end];
}

@mixin page-columns-float-fullcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-wide-full-page-gutter-start
    [screen-start-inset] $grid-float-wide-full-sidebar-gutter
    [page-start] $grid-float-wide-full-sidebar-seg1
    [page-start-inset] $grid-float-wide-full-sidebar-seg2
    [body-start-outset] $grid-float-wide-full-sidebar-seg3
    [body-start] $grid-float-wide-full-body-gutter-start
    [body-content-start] $grid-float-wide-full-body
    [body-content-end] $grid-float-wide-full-body-gutter-end
    [body-end body-end-outset page-end-inset page-end] $grid-float-wide-full-margin-gutter
    [screen-end-inset] $grid-float-wide-full-page-gutter-end
    [screen-end];
}

@mixin page-columns-float-listing-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-wide-listing-page-gutter-start
    [screen-start-inset] $grid-float-wide-listing-sidebar-gutter
    [page-start] $grid-float-wide-listing-sidebar-seg1
    [page-start-inset] $grid-float-wide-listing-sidebar-seg2
    [body-start-outset] $grid-float-wide-listing-sidebar-seg3
    [body-start] $grid-float-wide-listing-body-gutter-start
    [body-content-start] $grid-float-wide-listing-body
    [body-content-end] $grid-float-wide-listing-body-gutter-end
    [body-end] $grid-float-wide-listing-margin-seg3
    [body-end-outset] $grid-float-wide-listing-margin-seg2
    [page-end-inset] $grid-float-wide-listing-margin-seg1
    [page-end] $grid-float-wide-listing-margin-gutter
    [screen-end-inset] $grid-float-wide-listing-page-gutter-end
    [screen-end];
}

// medium 976 down
@mixin page-columns-float-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-mid-page-gutter-start
    [screen-start-inset] $grid-float-mid-sidebar-gutter
    [page-start page-start-inset body-start-outset body-start] $grid-float-mid-body-gutter-start
    [body-content-start] $grid-float-mid-body
    [body-content-end] $grid-float-mid-body-gutter-end
    [body-end] $grid-float-mid-margin-seg3
    [body-end-outset] $grid-float-mid-margin-seg2
    [page-end-inset] $grid-float-mid-margin-seg1
    [page-end] $grid-float-mid-margin-gutter
    [screen-end-inset] $grid-float-mid-page-gutter-end
    [screen-end];
}

@mixin page-columns-float-slimcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-mid-slim-page-gutter-start
    [screen-start-inset] $grid-float-mid-slim-sidebar-gutter
    [page-start page-start-inset body-start-outset body-start] $grid-float-mid-slim-body-gutter-start
    [body-content-start] $grid-float-mid-slim-body
    [body-content-end] $grid-float-mid-slim-body-gutter-end
    [body-end] $grid-float-mid-slim-margin-seg3
    [body-end-outset] $grid-float-mid-slim-margin-seg2
    [page-end-inset] $grid-float-mid-slim-margin-seg1
    [page-end] $grid-float-mid-slim-margin-gutter
    [screen-end-inset] $grid-float-mid-slim-page-gutter-end
    [screen-end];
}

@mixin page-columns-float-fullcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-mid-full-page-gutter-start
    [screen-start-inset] $grid-float-mid-full-sidebar-gutter
    [page-start page-start-inset body-start-outset body-start] $grid-float-mid-full-body-gutter-start
    [body-content-start] $grid-float-mid-full-body
    [body-content-end]$grid-float-mid-full-body-gutter-end
    [body-end body-end-outset page-end-inset page-end] $grid-float-mid-full-margin-gutter
    [screen-end-inset] $grid-float-mid-full-page-gutter-end
    [screen-end];
}

@mixin page-columns-float-listing-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-float-mid-listing-page-gutter-start
    [screen-start-inset] $grid-float-mid-listing-sidebar-gutter
    [page-start page-start-inset body-start-outset body-start] $grid-float-mid-listing-body-gutter-start
    [body-content-start] $grid-float-mid-listing-body
    [body-content-end] $grid-float-mid-listing-body-gutter-end
    [body-end] $grid-float-mid-listing-margin-seg3
    [body-end-outset] $grid-float-mid-listing-margin-seg2
    [page-end-inset] $grid-float-mid-listing-margin-seg1
    [page-end] $grid-float-mid-listing-margin-gutter
    [screen-end-inset] $grid-float-mid-listing-page-gutter-end
    [screen-end];
}

// Docked Grid Definitions
@mixin page-columns-docked-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-wide-page-gutter-start
    [screen-start-inset page-start] $grid-docked-wide-sidebar-seg1
    [page-start-inset] $grid-docked-wide-sidebar-seg2
    [body-start-outset] $grid-docked-wide-sidebar-seg3
    [body-start] $grid-docked-wide-body-gutter-start
    [body-content-start] $grid-docked-wide-body
    [body-content-end] $grid-docked-wide-body-gutter-end
    [body-end] $grid-docked-wide-margin-seg3
    [body-end-outset] $grid-docked-wide-margin-seg2
    [page-end-inset] $grid-docked-wide-margin-seg1
    [page-end] $grid-docked-wide-margin-gutter
    [screen-end-inset] $grid-docked-wide-page-gutter-end
    [screen-end];
}

@mixin page-columns-docked-slimcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-wide-slim-page-gutter-start
    [screen-start-inset page-start] $grid-docked-wide-slim-sidebar-seg1
    [page-start-inset] $grid-docked-wide-slim-sidebar-seg2
    [body-start-outset] $grid-docked-wide-slim-sidebar-seg3
    [body-start] $grid-docked-wide-slim-body-gutter-start
    [body-content-start] $grid-docked-wide-slim-body
    [body-content-end] $grid-docked-wide-slim-body-gutter-end
    [body-end] $grid-docked-wide-slim-margin-seg3
    [body-end-outset] $grid-docked-wide-slim-margin-seg2
    [page-end-inset] $grid-docked-wide-slim-margin-seg1
    [page-end] $grid-docked-wide-slim-margin-gutter
    [screen-end-inset] $grid-docked-wide-slim-page-gutter-end
    [screen-end];
}

@mixin page-columns-docked-fullcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-wide-full-page-gutter-start
    [screen-start-inset page-start] $grid-docked-wide-full-sidebar-seg1
    [page-start-inset] $grid-docked-wide-full-sidebar-seg2
    [body-start-outset] $grid-docked-wide-full-sidebar-seg3
    [body-start] $grid-docked-wide-full-body-gutter-start
    [body-content-start] $grid-docked-wide-full-body
    [body-content-end] $grid-docked-wide-full-body-gutter-end
    [body-end body-end-outset page-end-inset page-end] $grid-docked-wide-full-margin-gutter
    [screen-end-inset] $grid-docked-wide-full-page-gutter-end
    [screen-end];
}

@mixin page-columns-docked-listing-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-wide-listing-page-gutter-start
    [screen-start-inset page-start] $grid-docked-wide-listing-sidebar-seg1
    [page-start-inset] $grid-docked-wide-listing-sidebar-seg2
    [body-start-outset] $grid-docked-wide-listing-sidebar-seg3
    [body-start] $grid-docked-wide-listing-body-gutter-start
    [body-content-start] $grid-docked-wide-listing-body
    [body-content-end] $grid-docked-wide-listing-body-gutter-end
    [body-end] $grid-docked-wide-listing-margin-seg3
    [body-end-outset] $grid-docked-wide-listing-margin-seg2
    [page-end-inset] $grid-docked-wide-listing-margin-seg1
    [page-end] $grid-docked-wide-listing-margin-gutter
    [screen-end-inset] $grid-docked-wide-listing-page-gutter-end
    [screen-end];
}

@mixin page-columns-docked-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-mid-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-body
    [body-content-end] $grid-docked-mid-body-gutter-end
    [body-end] $grid-docked-mid-margin-seg3
    [body-end-outset] $grid-docked-mid-margin-seg2
    [page-end-inset] $grid-docked-mid-margin-seg1
    [page-end] $grid-docked-mid-margin-gutter
    [screen-end-inset] $grid-docked-mid-page-gutter-end
    [screen-end];
}

@mixin page-columns-docked-slimcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-mid-slim-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-slim-body
    [body-content-end] $grid-docked-mid-slim-body-gutter-end
    [body-end] $grid-docked-mid-slim-margin-seg3
    [body-end-outset] $grid-docked-mid-slim-margin-seg2
    [page-end-inset] $grid-docked-mid-slim-margin-seg1
    [page-end] $grid-docked-mid-slim-margin-gutter
    [screen-end-inset] $grid-docked-mid-slim-page-gutter-end
    [screen-end];
}

@mixin page-columns-docked-fullcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-mid-full-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-full-body
    [body-content-end] $grid-docked-mid-full-body-gutter-end
    [body-end body-end-outset page-end-inset page-end] $grid-docked-mid-full-margin-gutter
    [screen-end-inset] $grid-docked-mid-full-page-gutter-end
    [screen-end];
}

@mixin page-columns-docked-listing-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-docked-mid-listing-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-listing-body
    [body-content-end] $grid-docked-mid-listing-body-gutter-start
    [body-end] $grid-docked-mid-slim-margin-seg3
    [body-end-outset] $grid-docked-mid-slim-margin-seg2
    [page-end-inset] $grid-docked-mid-slim-margin-seg1
    [page-end] $grid-docked-mid-listing-margin-gutter
    [screen-end-inset] $grid-docked-mid-listing-page-gutter-end
    [screen-end];
}

// Plain Grid Definitions
@mixin page-columns-default-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-wide-page-gutter-start
    [screen-start-inset] $grid-default-wide-sidebar-gutter
    [page-start page-start-inset] $grid-default-wide-sidebar-seg1
    [body-start-outset] $grid-default-wide-sidebar-seg2
    [body-start] $grid-default-wide-body-gutter-start
    [body-content-start] $grid-default-wide-body
    [body-content-end] $grid-default-wide-body-gutter-end
    [body-end] $grid-default-wide-margin-seg3
    [body-end-outset] $grid-default-wide-margin-seg2
    [page-end-inset] $grid-default-wide-margin-seg1
    [page-end] $grid-default-wide-margin-gutter
    [screen-end-inset] $grid-default-wide-page-gutter-end
    [screen-end];
}

@mixin page-columns-default-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-mid-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-mid-sidebar-gutter
    [body-start] $grid-default-mid-body-gutter-start
    [body-content-start] $grid-default-mid-body
    [body-content-end] $grid-default-mid-body-gutter-end
    [body-end] $grid-default-mid-margin-seg3
    [body-end-outset] $grid-default-mid-margin-seg2
    [page-end-inset] $grid-default-mid-margin-seg1
    [page-end] $grid-default-mid-margin-gutter
    [screen-end-inset] $grid-default-mid-page-gutter-end
    [screen-end];
}

// Full content grid definitions
@mixin page-columns-fullcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-full-wide-page-gutter-start
    [screen-start-inset] $grid-default-full-wide-sidebar-gutter
    [page-start page-start-inset] $grid-default-full-wide-sidebar-seg1
    [body-start-outset] $grid-default-full-wide-sidebar-seg2
    [body-start] $grid-default-full-wide-body-gutter-start
    [body-content-start] $grid-default-full-wide-body
    [body-content-end] $grid-default-full-wide-body-gutter-end
    [body-end] $grid-default-full-wide-margin-seg2
    [body-end-outset] $grid-default-full-wide-margin-seg1
    [page-end-inset page-end] $grid-default-full-wide-margin-gutter
    [screen-end-inset] $grid-default-full-wide-page-gutter-end;
}

@mixin page-columns-fullcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-full-mid-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-full-mid-sidebar-gutter
    [body-start] $grid-default-full-mid-body-gutter-start
    [body-content-start] $grid-default-full-mid-body
    [body-content-end] $grid-default-full-mid-body-gutter-end
    [body-end body-end-outset page-end-inset page-end] $grid-default-full-mid-margin-gutter
    [screen-end-inset] $grid-default-full-mid-page-gutter-end
    [screen-end];
}

// Listing content grid definitions
@mixin page-columns-listing-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-listing-wide-page-gutter-start
    [screen-start-inset page-start] $grid-default-listing-wide-sidebar-seg1
    [page-start-inset] $grid-default-listing-wide-sidebar-seg2
    [body-start-outset] $grid-default-listing-wide-sidebar-seg3
    [body-start] $grid-default-listing-wide-body-gutter-start
    [body-content-start] $grid-default-listing-wide-body
    [body-content-end] $grid-default-listing-wide-body-gutter-end
    [body-end] $grid-default-listing-wide-sidebar-seg3
    [body-end-outset] $grid-default-listing-wide-margin-seg2
    [page-end-inset] $grid-default-listing-wide-sidebar-seg1
    [page-end] $grid-default-listing-wide-margin-gutter
    [screen-end-inset] $grid-default-listing-wide-page-gutter-end
    [screen-end];
}

@mixin page-columns-listing-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-listing-mid-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-listing-mid-sidebar-gutter
    [body-start] $grid-default-listing-mid-body-gutter-start
    [body-content-start] $grid-default-listing-mid-body
    [body-content-end body-end body-end-outset page-end-inset page-end] $grid-default-listing-mid-margin-gutter
    [screen-end-inset] $grid-default-listing-mid-page-gutter-end
    [screen-end];
}

// Slim content grid definitions
@mixin page-columns-slimcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-slim-wide-page-gutter-start
    [screen-start-inset] $grid-default-slim-wide-sidebar-gutter
    [page-start page-start-inset] $grid-default-slim-wide-sidebar-seg1
    [body-start-outset] $grid-default-slim-wide-sidebar-seg2
    [body-start] $grid-default-slim-wide-body-gutter-start
    [body-content-start] $grid-default-slim-wide-body
    [body-content-end] $grid-default-slim-wide-body-gutter-end
    [body-end] $grid-default-slim-wide-sidebar-seg3
    [body-end-outset] $grid-default-slim-wide-margin-seg2
    [page-end-inset] $grid-default-slim-wide-sidebar-seg1
    [page-end] $grid-default-slim-wide-margin-gutter
    [screen-end-inset] $grid-default-slim-wide-page-gutter-end
    [screen-end];
}

@mixin page-columns-slimcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-slim-mid-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset] $grid-default-slim-mid-sidebar-gutter
    [body-start] $grid-default-slim-mid-body-gutter-start
    [body-content-start] $grid-default-slim-mid-body
    [body-content-end] $grid-default-slim-mid-body-gutter-end
    [body-end] $grid-default-slim-mid-margin-seg3
    [body-end-outset] $grid-default-slim-mid-margin-seg2
    [page-end-inset] $grid-default-slim-mid-margin-seg1
    [page-end] $grid-default-slim-mid-margin-gutter
    [screen-end-inset] $grid-default-slim-mid-page-gutter-end
    [screen-end];
}

// TOC left grid
@mixin page-columns-tocleft-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-toc-wide-page-gutter-start
    [screen-start-inset] $grid-default-toc-wide-sidebar-gutter
    [page-start] $grid-default-toc-wide-sidebar-seg1
    [page-start-inset] $grid-default-toc-wide-sidebar-seg2
    [body-start-outset] $grid-default-toc-wide-sidebar-seg3
    [body-start] $grid-default-toc-wide-body-gutter-start
    [body-content-start] $grid-default-toc-wide-body
    [body-content-end] $grid-default-toc-wide-body-gutter-end
    [body-end] $grid-default-toc-wide-margin-seg3
    [body-end-outset] $grid-default-toc-wide-margin-seg2
    [page-end-inset] $grid-default-toc-wide-margin-seg1
    [page-end] $grid-default-toc-wide-margin-gutter
    [screen-end-inset] $grid-default-toc-wide-page-gutter-end
    [screen-end];
}

@mixin page-columns-tocleft-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-default-toc-mid-page-gutter-start
    [screen-start-inset] $grid-default-toc-mid-sidebar-gutter
    [page-start] $grid-default-toc-mid-sidebar-seg1
    [page-start-inset] $grid-default-toc-mid-sidebar-seg2
    [body-start-outset] $grid-default-toc-mid-sidebar-seg3
    [body-start] $grid-default-toc-mid-body-gutter-start
    [body-content-start] $grid-default-toc-mid-body
    [body-content-end] $grid-default-toc-mid-body-gutter-end
    [body-end body-end-outset page-end-inset page-end] $grid-default-toc-mid-margin-gutter
    [screen-end-inset] $grid-default-toc-mid-page-gutter-end
    [screen-end];
}

// Small size responsive grid
// All grids share this fully collapsed mode which hides
// the sidebar and margin
@mixin grid-template-columns-narrow {
  grid-template-columns:
    [screen-start] $grid-page-gutter-start
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
      0px,
      1fr
    )
    [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] $grid-page-gutter-end
    [screen-end];
}


// quarto-scss-analysis-annotation { "origin": "'mixins' section from user-defined SCSS" }



// quarto-scss-analysis-annotation { "origin": "'rules' section from format" }





@import "mixins/banner";
@include bsBanner("");

// scss-docs-start import-stack
// Configuration
@import "variables-dark";
@import "maps";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "light-dark";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

// color-contrast() was introduced in Bootstrap 5.
// We include our own version for a few reasons:
// 1. Easily turn off warnings options(bslib.color_contrast_warnings=F)
// 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
// 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()

// Also note that color-contrast() lives in sass-utils since projects like Quarto
// and flexdashboard currently assume it exists there....
@import "../sass-utils/color-contrast.scss";


@function is-css-variable($x) {
  @if (type-of($x) != string) {
    @return false;
  } @else {
    @return str-slice($x, 1, 6) == 'var(--';
  }
}

@import "spacer";
@import "tab-fill";
@import "color-utilities";

.tab-content {
  // Workaround for pkgdown's CSS to make tab-pane all a consistent height
  // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L342-L355
  >.tab-pane.html-fill-container {
    display: none;
  }

  // Take precedence over Bootstrap's `display:block` rule
  >.active.html-fill-container {
    display: flex;
  }

  // Another workaround for pkgdown adding extra padding we didn't ask for
  // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L335-L337
  &.html-fill-container {
    padding: 0;
  }
}

$spacer: 1rem !default;

:root {
  // Controls default spacing in layout containers (e.g, layout_columns())
  --bslib-spacer: #{$spacer};
  --bslib-mb-spacer: var(--bslib-spacer, 1rem);
}

// Some things like card(), p(), inputs, etc. want some margin-bottom by default
// so you can plop them anywhere and you get spacing between rows. However, now
// that we have layout utilities like page_fillable(), layout_columns(),
// layout_sidebar(), etc. where we can control the gap between rows/columns, we
// need a way to reset those margin-bottom to 0 in those special contexts
//
// We do this by adding this class to components (e.g., card())...
.bslib-mb-spacing {
  margin-bottom: var(--bslib-mb-spacer);
}

// ...And this class for layout containers (e.g, layout_columns())
.bslib-gap-spacing {
  gap: var(--bslib-mb-spacer);
  > .bslib-mb-spacing, > .form-group, > p, > pre {
    margin-bottom: 0;
  }
}

// We generally don't want mb spacing for _activated_ fill items
.html-fill-container > .html-fill-item.bslib-mb-spacing {
  margin-bottom: 0;
}
$bslib-enable-color-utilities: $bootstrap-version >= 5 !default;

@if ($bslib-enable-color-utilities) {
  $bslib-gradient-colors: () !default;

  $bslib-gradient-colors-defaults: ();
  $bslib-color-names: ("blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");

  @each $name in $bslib-color-names {
    @if (map-has-key($colors, $name)) {
      $bslib-gradient-colors-defaults: map-merge(
        $bslib-gradient-colors-defaults,
        ($name: map-get($colors, $name))
      );
    }
  }

  $bslib-gradient-colors: map-merge(
    $bslib-gradient-colors-defaults,
    $bslib-gradient-colors
  );

  // Named color background and foreground utility classes ---------------------
  @each $name, $color in $bslib-gradient-colors {
    .bg-#{$name} {
      --bslib-color-bg: #{$color};
      --bslib-color-fg: #{color-contrast($color)};
      background-color: var(--bslib-color-bg);
      color: var(--bslib-color-fg);
    }

    .text-#{$name} {
      --bslib-color-fg: #{$color};
      color: var(--bslib-color-fg);
    }
  }

  // Fill in the `--color-*` variables
  @each $name, $color in $theme-colors {
    .text-#{$name} {
      --bslib-color-fg: #{$color};
    }
    .bg-#{$name} {
      --bslib-color-bg: #{$color};
      --bslib-color-fg: #{color-contrast($color)};
    }
  }

  // Gradient backgrounds ------------------------------------------------------
  //
  // Creates gradient background for every named color pair. Users can add
  // additional colors into the mix by setting $bslib-gradient-colors to a map of
  // color names to colors. Creates class names like: .bg-gradient-{from}-{to}.
  @each $name1, $color1 in $bslib-gradient-colors {
    @each $name2, $color2 in $bslib-gradient-colors {
      @if $name1 != $name2 {
        .bg-gradient-#{$name1}-#{$name2} {
          $color-mid: mix($color1, $color2, 60%);
          $color-fg: color-contrast($color-mid);

          --bslib-color-fg: #{$color-fg};
          --bslib-color-bg: #{$color-mid};

          background: linear-gradient(
            var(--bg-gradient-deg, 140deg),
            $color1 var(--bg-gradient-start, 36%),
            $color2 var(--bg-gradient-end, 180%)
          ) $color-mid;
          color: $color-fg;
        }
      }
    }
  }
}

$bslib-value-box-enable-border: "auto" !default; // "auto" | "never" | "always"
$bslib-value-box-enable-shadow: $enable-shadows !default;
$bslib-value-box-horizontal-break-point: 300px;

:root {
  --bslib-value-box-shadow: #{if($bslib-value-box-enable-shadow, #{$box-shadow}, none)};
  // value box border width is set to "-auto-yes" when the card has .border-auto
  // or "-auto-no" by default. These cards all use "-baseline", where the border
  // can be disabled entirely by setting $bslib-value-box-enable-border: "never"
  // or --bslib-value-box-border-width-baseline: 0. In "auto" mode, the border
  // is disabled without the border-auto class, or disabled if shadow is enabled.
  --bslib-value-box-border-width-auto-yes: #{if($bslib-value-box-enable-shadow, 0, var(--bslib-value-box-border-width-baseline))};
  --bslib-value-box-border-width-auto-no: #{if($bslib-value-box-enable-border == "auto", 0, var(--bslib-value-box-border-width-baseline))};
  --bslib-value-box-border-width-baseline: #{if($bslib-value-box-enable-border == "never", 0, $card-border-width)};
}

// CSS variables that start with --- (3 dashes instead of 2) are private vars
// that are set by user arguments in the R calls. The CSS properties below only
// apply to the default value box style; the standard way to theme individual
// value boxes is with CSS classes on the value box container.
// :root {
//   --bslib-value-box-color:;
//   --bslib-value-box-bg:;
//   --bslib-value-box-border-color:;
// }

.bslib-value-box {
  &.card {
    // .card also sets box-shadow by default, likely to an empty css variable
    box-shadow: var(--bslib-value-box-shadow);
  }

  border-width: var(--bslib-value-box-border-width-auto-no, var(--bslib-value-box-border-width-baseline));
  &.border-auto {
    border-width: var(--bslib-value-box-border-width-auto-yes, var(--bslib-value-box-border-width-baseline));
  }

  &.default {
    --bslib-value-box-bg-default: var(--bs-card-bg, #{$body-bg});
    --bslib-value-box-border-color-default: var(--bs-card-border-color, #{$card-border-color});
    color: var(--bslib-value-box-color);
    background-color: var(--bslib-value-box-bg, var(--bslib-value-box-bg-default));
    border-color: var(--bslib-value-box-border-color, var(--bslib-value-box-border-color-default));
  }

  container-name: bslib-value-box;
  container-type: inline-size;

  .value-box-grid {
    display: grid;
    grid-template-areas: "left right";
    align-items: center;
    overflow: hidden;
  }

  .value-box-showcase {
    height: 100%;
    max-height: var(---bslib-value-box-showcase-max-h, 100%);
    &, > .html-fill-item {
      width: 100%;
    }
  }

  &[data-full-screen="true"] {
    .value-box-showcase {
      max-height: var(---bslib-value-box-showcase-max-h-fs, 100%);
    }
  }

  // When value boxes get too small, we lay them out vertically using a container query.
  // But we don't need this for mobile, where we have one box per row. This media query
  // is the inverse of `@include media-breakpoint-down(sm)` but that mixin doesn't work
  // inside nested queries.
  @media screen and (min-width: breakpoint-max(sm, $grid-breakpoints)) {
    @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
      &:not(.showcase-bottom) .value-box-grid {
        // override specificity of showcase layouts for small value boxes
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto;
        grid-template-areas:
          "top"
          "bottom";

        .value-box-showcase {
          grid-area: top !important;
        }

        .value-box-area {
          grid-area: bottom !important;
          justify-content: end;
        }
      }
    }
  }

  // Should also be fillable/fill (i.e., d-flex; flex: 1)
  .value-box-area {
    justify-content: center;
    padding: 1.5rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    * {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  .value-box-title {
    @include bootstrap-heading-font-and-spacing($h6-font-size);
    // add a non-breaking space to ensure it's not 0 height
    &:empty::after {
      content: '\00a0 ';
    }
  }

  .value-box-value {
    @include bootstrap-heading-font-and-spacing($h2-font-size);
    // add a non-breaking space to ensure it's not 0 height
    &:empty::after {
      content: '\00a0 ';
    }
  }

  // Should also be fillable/fill (i.e., d-flex; flex: 1)
  .value-box-showcase {
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    padding: 1rem;

    .bi, .fa, .fab, .fas, .far {
      opacity: .85;
      min-width: 50px;
      max-width: 125%;
    }
    // We set font size because {bsicons}/{fontawesome} both
    // set height/width to 1em by default (as an inline style)
     .bi, .fa, .fab, .fas, .far { font-size: 4rem; }
  }


  &.showcase-top-right {
    .value-box-grid {
      grid-template-columns: 1fr var(---bslib-value-box-showcase-w, 50%);

      .value-box-showcase {
        grid-area: right;
        margin-left: auto;
        align-self: start;
        align-items: end;
        padding-left: 0;
        padding-bottom: 0;
      }

      .value-box-area {
        grid-area: left;
        align-self: end;
      }
    }

    &[data-full-screen="true"] {
      .value-box-grid {
        grid-template-columns: auto var(---bslib-value-box-showcase-w-fs, 1fr);
        > div {
          align-self: center;
        }
      }
    }

    &:not([data-full-screen="true"]) {
      .value-box-showcase {
        margin-top: 0;
      }

      @container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
        .value-box-grid {
          .value-box-showcase { // reset padding on showcase_container
            padding-left: 1rem;
          }
        }
      }
    }
  }

  &.showcase-left-center {
    .value-box-grid {
      grid-template-columns: var(---bslib-value-box-showcase-w, 30%) auto;
    }

    &[data-full-screen="true"] {
      .value-box-grid {
        grid-template-columns: var(---bslib-value-box-showcase-w-fs, 1fr) auto;
      }
    }

    &:not([data-fill-screen="true"]) {
      .value-box-grid {
        .value-box-showcase {
          grid-area: left;
        }

        .value-box-area {
          grid-area: right;
        }
      }
    }
  }

  &.showcase-bottom {
    .value-box-grid {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr var(---bslib-value-box-showcase-h, auto);
      grid-template-areas:
          "top"
          "bottom";
      overflow: hidden;

      .value-box-showcase {
        grid-area: bottom;
        padding: 0;
        margin: 0;
      }

      .value-box-area {
        grid-area: top;
      }
    }

    &[data-full-screen="true"] {
      .value-box-grid {
        grid-template-rows: 1fr var(---bslib-value-box-showcase-h-fs, 2fr);

        .value-box-showcase {
          padding: 1rem;
        }
      }
    }
  }
}

@include color-mode(dark) {
  .bslib-value-box {
    // Bootstrap doesn't have a dark shadow, but the default isn't quite right
    --bslib-value-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
  }
}

/* CSS behind nav_spacer() */
@mixin nav-spacer() {
  .nav:not(.nav-hidden) {
    /* Make sure nav container is flexbox (they aren't in BS3) */
    display: flex !important;
    display: -webkit-flex !important;
    // Logic for horizontal nav (e.g., navset_tab(), etc)
    &:not(.nav-stacked):not(.flex-column) {
      float: none !important;
      > .bslib-nav-spacer {
        margin-left: auto !important;
      }
      /* .form-inline doesn't vertically align in BS3? */
      > .form-inline {
        margin-top: auto;
        margin-bottom: auto;
      }
    }
    // Logic for vertical nav (e.g., navset_pill_list())
    &.nav-stacked {
      flex-direction: column;
      -webkit-flex-direction: column;
      height: 100%;
      > .bslib-nav-spacer {
        margin-top: auto !important;
      }
    }
  }
}

/* BS4+ uses this mixin for configurable breakpoints */
@if mixin-exists("media-breakpoint-up") {
  @include media-breakpoint-up(sm) {
    @include nav-spacer();
  }
} @else {
  /* BS3 default navbar breakpoint */
  @media (min-width: 768px) {
    @include nav-spacer();
  }
}

.bslib-card {
  // TODO: allow a way to opt out
  overflow: auto;

  // Avoid "double padding" when two card_body()s are immediate siblings
  .card-body + .card-body {
    padding-top: 0;
  }

  .card-body {
    overflow: auto;
    p {
      margin-top: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .card-body {
    max-height: var(--bslib-card-body-max-height, none);
  }

  &[data-full-screen="true"] > .card-body {
    max-height: var(--bslib-card-body-max-height-full-screen, none);
  }

  .card-header {
    .form-group {
      margin-bottom: 0;
    }
    .selectize-control {
      margin-bottom: 0;
      // TODO: we should probably add this to selectize's SCSS since this actually makes selectInput()
      // usable with width="fit-content"
      .item {
        margin-right: 1.15rem;
      }
    }
  }

  .card-footer {
    margin-top: auto;
  }

  // For navs_tab_card(title = ...)
  .bslib-navs-card-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .nav {
      margin-left: auto;
    }
  }

  .bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]) {
    border: none;
  }
  .bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

}


/*************************************************
* Full screen card logic
*************************************************/

[data-full-screen="true"] {
  position: fixed;
  inset: 3.5rem 1rem 1rem;
  height: auto !important;
  max-height: none !important;
  width: auto !important;
  z-index: $zindex-popover;
}

.bslib-full-screen-enter {
  display: none;
  position: absolute;
  bottom: var(--bslib-full-screen-enter-bottom, 0.2rem);
  right: var(--bslib-full-screen-enter-right, 0);
  top: var(--bslib-full-screen-enter-top);
  left: var(--bslib-full-screen-enter-left);
  color: var(--bslib-color-fg, var(--bs-card-color));
  background-color: var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));
  border: var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  margin: 0.2rem 0.4rem;
  padding: 0.55rem !important;
  font-size: .8rem;
  cursor: pointer;
  opacity: 0.7;
  &:hover { opacity: 1; }
  z-index: $zindex-popover;
}

.card[data-full-screen="false"]:hover > * > .bslib-full-screen-enter {
  display: block;
}

// Hide all enter-full-screen buttons when *any* card is full-screenified
.bslib-has-full-screen .card:hover > * > .bslib-full-screen-enter {
  display: none;
}

// Only allow full_screen on desktop screens
@include media-breakpoint-down(sm) {
  .bslib-full-screen-enter { display: none !important; }
}

.bslib-full-screen-exit {
  position: relative;
  top: 1.35rem;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  float: right;
  margin-right: 2.15rem;
  align-items: center;
  color: rgba(var(--bs-body-bg-rgb), 0.8);
  &:hover {
    color: rgba(var(--bs-body-bg-rgb), 1);
  }
  svg {
    margin-left: 0.5rem;
    font-size: 1.5rem;
  }
}

#bslib-full-screen-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(var(--bs-body-color-rgb), 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: $zindex-popover - 1;
  animation: bslib-full-screen-overlay-enter 400ms cubic-bezier(.6,.02,.65,1) forwards;
}

@keyframes bslib-full-screen-overlay-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.bslib-grid {
  display: grid !important;
  gap: var(--bslib-spacer, 1rem);
  height: var(--bslib-grid-height);
  &.grid {
    // Don't let intrinsic width of a column affect the width of grid cols
    grid-template-columns: repeat(var(--bs-columns, 12), minmax(0, 1fr));
    // For some reason, Bootstrap sets `grid-template-rows: 1fr` by default, which
    // is problematic for a multi-row filling layout. This fixes it...
    // > page_fillable(layout_columns(c(12, 12), plotly::plot_ly(), plotly::plot_ly()))
    grid-template-rows: unset;
    grid-auto-rows: var(--bslib-grid--row-heights);
    @include bslib-breakpoints-css-vars('bslib-grid--row-heights', map-keys($grid-breakpoints));
  }

  & > * > .shiny-input-container {
    width: 100%;
  }
}

.bslib-grid-item {
  grid-column: auto/span 1;
}

@include media-breakpoint-down(md) {
  // collapse all columns to a single column below medium (by default only)
  .bslib-grid-item {
    grid-column: 1 / -1;
  }
}

@include media-breakpoint-down(sm) {
  // with each "row" taking its natural height
  .bslib-grid {
    grid-template-columns: 1fr !important;
    height: var(--bslib-grid-height-mobile);
    &.grid {
      height: unset !important;
      grid-auto-rows: var(--bslib-grid--row-heights--xs, auto);
    }
  }
}

.accordion {
  .accordion-header {
    @include bootstrap-heading($h2-font-size);
    margin-bottom: 0;
  }
  .accordion-icon:not(:empty) {
    margin-right: 0.75rem;
    display: flex; /* Without flex, the height/alignment is messed up */
  }
  .accordion-button:not(.collapsed) {
    box-shadow: none;
    // This none overrides the box-shadow applied to
    // .accordion-button:focus (and, as a result, non-collapsed buttons
    // won't show a visual indication of focus, #488).
    // So, repeat the .accordion-button:focus below to give it a
    // higher priority.
    &:focus {
      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
    }
  }
}

.navbar+.container-fluid {

  // When the tab/page is fillable, undo the padding on the container-fluid
  // (in this case, the user has control over padding/gap)
  &:has(> .tab-content > .tab-pane.active.html-fill-container) {
    padding-left: 0;
    padding-right: 0;
  }

  // When the tab/page is fillable, add sensible default padding
  >.tab-content>.tab-pane.active.html-fill-container {
    padding: var(--bslib-spacer, 1rem);
    gap: var(--bslib-spacer, 1rem);

    // ...but if it holds a single sidebar layout, remove the padding
    &:has(> .bslib-sidebar-layout:only-child) {
      padding: 0;
    }

    // And smart border defaults for nav_panel("Foo", layout_sidebar())
    >.bslib-sidebar-layout:only-child {
      &:not([data-bslib-sidebar-border="true"]) {
        border-left: none;
        border-right: none;
        border-bottom: none;
      }

      &:not([data-bslib-sidebar-border-radius="true"]) {
        border-radius: 0;
      }
    }
  }
}

// Make sure a border appears between the navbar and the sidebar layout
// (especially important when page_navbar(inverse = FALSE, sidebar = sidebar())
.navbar+div>.bslib-sidebar-layout {
  border-top: var(--bslib-sidebar-border);
}
html {
  height: 100%;
}

.bslib-page-fill {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--bslib-spacer, 1rem);
  gap: var(--bslib-spacer, 1rem);
}

@include media-breakpoint-down(sm) {
  .bslib-page-fill {
    height: var(--bslib-page-fill-mobile-height, auto);
  }
}

$bslib-page-sidebar-title-bg: if($navbar-bg, $navbar-bg, $dark) !default;
$bslib-page-sidebar-title-color: color-contrast($bslib-page-sidebar-title-bg) !default;
$bslib-sidebar-padding: $spacer * 1.5 !default;

:root {
  --bslib-page-sidebar-title-bg: #{$bslib-page-sidebar-title-bg};
  --bslib-page-sidebar-title-color: #{$bslib-page-sidebar-title-color};
}

.bslib-page-title {
  background-color: var(--bslib-page-sidebar-title-bg);
  color: var(--bslib-page-sidebar-title-color);
  font-size: $h4-font-size;
  font-weight: 300;
  padding: var(--bslib-spacer, 1rem);
  padding-left: $bslib-sidebar-padding;
  margin-bottom: 0;
  border-bottom: $border-width solid $border-color;
}

$bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
$bslib-sidebar-fg: var(--bs-emphasis-color, black) !default;
$bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
$bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
$bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)), var(--bslib-sidebar-width, 250px));


.bslib-sidebar-layout {
  --bslib-sidebar-transition-duration: 500ms;
  --bslib-sidebar-transition-easing-x: cubic-bezier(0.8, 0.78, 0.22, 1.07);
  --bslib-sidebar-border: #{$bslib-sidebar-border};
  --bslib-sidebar-border-radius: var(--bs-border-radius);
  --bslib-sidebar-vert-border: #{$bslib-sidebar-border};
  --bslib-sidebar-bg: #{$bslib-sidebar-bg};
  --bslib-sidebar-fg: #{$bslib-sidebar-fg};
  --bslib-sidebar-main-fg: var(--bs-card-color, var(--bs-body-color));
  --bslib-sidebar-main-bg: var(--bs-card-bg, var(--bs-body-bg));
  --bslib-sidebar-toggle-bg: #{$bslib-sidebar-toggle-bg};
  --bslib-sidebar-padding: calc(var(--bslib-spacer) * 1.5);
  --bslib-sidebar-icon-size: var(--bslib-spacer, 1rem);
  --bslib-sidebar-icon-button-size: calc(var(--bslib-sidebar-icon-size, 1rem) * 2);
  --bslib-sidebar-padding-icon: calc(var(--bslib-sidebar-icon-button-size, 2rem) * 1.5);
  // We intentionally don't give a value here, but it could be set by someone else
  // --bslib-collapse-toggle-border: ;
  --bslib-collapse-toggle-border-radius: var(--bs-border-radius, #{$border-radius});
  --bslib-collapse-toggle-transform: 0deg;
  --bslib-sidebar-toggle-transition-easing: cubic-bezier(1, 0, 0, 1);
  --bslib-collapse-toggle-right-transform: 180deg;
  --bslib-sidebar-column-main: minmax(0, 1fr);
  
  display: grid !important;
  grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);
  position: relative;

  @include transition(grid-template-columns ease-in-out var(--bslib-sidebar-transition-duration));

  border: var(--bslib-sidebar-border);
  border-radius: var(--bslib-sidebar-border-radius);

  &[data-bslib-sidebar-border="false"] {
    border: none;
  }
  &[data-bslib-sidebar-border-radius="false"] {
    border-radius: initial;
  }

  > .main, > .sidebar {
    grid-row: 1 / 2;
    border-radius: inherit;
    overflow: auto;
  }

  > .main {
    grid-column: 2 / 3;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: var(--bslib-sidebar-padding);
    transition: padding var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
    color: var(--bslib-sidebar-main-fg);
    background-color: var(--bslib-sidebar-main-bg);
  }

  > .sidebar {
    grid-column: 1 / 2;
    width: 100%;
    height: 100%;
    border-right: var(--bslib-sidebar-vert-border);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--bslib-sidebar-fg);
    background-color: var(--bslib-sidebar-bg);
    backdrop-filter: blur(5px);

    > .sidebar-content {
      display: flex;
      flex-direction: column;
      gap: var(--bslib-spacer, 1rem);
      padding: var(--bslib-sidebar-padding);
      // Add space for the toggle button (removed if sidebar is always open)
      padding-top: var(--bslib-sidebar-padding-icon);

      > :last-child:not(.sidebar-title) {
        // Remove margin-bottom from the last item because sidebar has padding.
        // We make an exception for .sidebar-title because it might be common to
        // have a title and bare text nodes (that don't count as children).
        margin-bottom: 0;
      }

      > .accordion {
        margin-left: calc(-1 * var(--bslib-sidebar-padding));
        margin-right: calc(-1 * var(--bslib-sidebar-padding));
        &:last-child {
            margin-bottom: calc(-1 * var(--bslib-sidebar-padding));
        }
        &:not(:last-child) {
          margin-bottom: $spacer;
        }
        .accordion-body {
          display: flex;
          flex-direction: column;
        }
      }

      // Accordions in sidebars are made flush with `.accordion-flush`, which
      // removes the top and bottom border of the first or last accordion item.
      // But in our usage, the accordions might not be the first or last item in
      // the sidebar. In that case, it's better to keep the top/bottom borders.
      > .accordion:not(:first-child) .accordion-item:first-child {
        border-top: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
      }
      > .accordion:not(:last-child) .accordion-item:last-child {
        border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
      }

      &.has-accordion > .sidebar-title {
        border-bottom: none;
        padding-bottom: 0;
      }
    }

    .shiny-input-container {
      width: 100%;
    }
  }

  &[data-bslib-sidebar-open="always"] {
    > .sidebar > .sidebar-content {
      // Always-open sidebars don't have a toggle & can use normal top padding
      padding-top: var(--bslib-sidebar-padding);
    }
  }

  > .collapse-toggle {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: inline-flex;
    align-items: center;
    position: absolute;
    right: calc(var(--bslib-sidebar-icon-size));
    top: calc(var(--bslib-sidebar-icon-size, 1rem) / 2);
    border: none;
    border-radius: var(--bslib-collapse-toggle-border-radius);
    height: var(--bslib-sidebar-icon-button-size, 2rem);
    width: var(--bslib-sidebar-icon-button-size, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--bslib-sidebar-fg);
    background-color: unset; // don't take `button` background color
    transition:
      color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
      top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
      right var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
      left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);

    &:hover {
      background-color: var(--bslib-sidebar-toggle-bg);
    }

    > .collapse-icon {
      opacity: 0.8;
      width: var(--bslib-sidebar-icon-size);
      height: var(--bslib-sidebar-icon-size);
      transform: rotateY(var(--bslib-collapse-toggle-transform));
      // N.B. since mobile view won't trigger a transition of grid-template-columns,
      // we transition this toggle to ensure _some_ transition event always happens.
      transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
    }

    &:hover > .collapse-icon {
      opacity: 1;
    }
  }

  .sidebar-title {
    font-size: $font-size-base * 1.25;
    line-height: $line-height-sm;
    margin-top: 0;
    margin-bottom: $spacer;
    padding-bottom: $spacer;
    border-bottom: var(--bslib-sidebar-border);
  }

  &.sidebar-right {
    grid-template-columns: var(--bslib-sidebar-column-main) $bslib-sidebar-column-sidebar;

    > .main {
      grid-column: 1 / 2;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit;
    }

    > .sidebar {
      grid-column: 2 / 3;
      border-right: none;
      border-left: var(--bslib-sidebar-vert-border);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    > .collapse-toggle {
      grid-column: 2 / 3;
      left: var(--bslib-sidebar-icon-size);
      right: unset;
      border: var(--bslib-collapse-toggle-border);
      > .collapse-icon {
        transform: rotateY(var(--bslib-collapse-toggle-right-transform));
      }
    }
  }

  &.sidebar-collapsed {
    --bslib-collapse-toggle-transform: 180deg;
    --bslib-collapse-toggle-right-transform: 0deg;
    --bslib-sidebar-vert-border: none;

    grid-template-columns: 0 minmax(0, 1fr);

    &.sidebar-right {
      grid-template-columns: minmax(0, 1fr) 0;
    }

    // Hide the sidebar contents after it's done transitioning so that
    // those contents don't impact the overall layout (i.e., height)
    &:not(.transitioning) {
      // Putting `display:none` on .sidebar would change the number of columns
      // in the grid, and I don't think we can transition between those states
      > .sidebar > * {
        display: none;
      }
    }

    > .main {
      border-radius: inherit;
    }

    &:not(.sidebar-right) > .main {
      padding-left: var(--bslib-sidebar-padding-icon);
    }
    &.sidebar-right > .main {
      padding-right: var(--bslib-sidebar-padding-icon);
    }

    > .collapse-toggle {
      color: var(--bslib-sidebar-main-fg);
      // The CSS variable (set via JS) is here to help avoid overlapping toggles
      top: calc(
          var(--bslib-sidebar-overlap-counter, 0) *
          calc(var(--bslib-sidebar-icon-size) +
          var(--bslib-sidebar-padding)
        ) + var(--bslib-sidebar-icon-size, 1rem) / 2);
      right: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
    }

    &.sidebar-right > .collapse-toggle {
      left: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
      right: unset;
    }
  }
}

@include media-breakpoint-up(sm) {
  // hide sidebar content while we transition the parent .sidebar on desktop
  // (on mobile the reveal happens immediately)
  .bslib-sidebar-layout.transitioning > .sidebar > .sidebar-content {
    display: none;
  }
}

@include media-breakpoint-down(sm) {
  .bslib-sidebar-layout {
    // Tell sidebar init js we're on mobile for `sidebar(open = "desktop")`
    &[data-bslib-sidebar-open="desktop"] {
      --bslib-sidebar-js-init-collapsed: true;
    }

    &, &.sidebar-right {
      // Remove sidebar borders in mobile view (except always-open, added below)
      > .sidebar { border: none; }

      // Main area takes up entire layout area to avoid layout shift when
      // sidebar is expanded as an overlay.
      > .main {
        grid-column: 1 / 3;
      }
    }

    // Always open sidebars become "flow" layouts in mobile view
    &[data-bslib-sidebar-open="always"] {
      display: block !important;
      > .sidebar {
        max-height: var(--bslib-sidebar-max-height-mobile);
        overflow-y: auto;
        border-top: var(--bslib-sidebar-vert-border);
      }
    }

    &:not([data-bslib-sidebar-open="always"]) {
      // Sidebar layer has to be lifted up to cover other (nested) sidebars
      &:not(.sidebar-collapsed) {
        > .sidebar { z-index: 1; }
        > .collapse-toggle { z-index: 1; }
      }

      // Either sidebar or main area take up entire layout depending on state
      $full-closed: 100% 0;
      $closed-full: 0 100%;
      grid-template-columns: $full-closed;
      &.sidebar-right {
        grid-template-columns: $closed-full;
      }

      &.sidebar-collapsed {
        grid-template-columns: $closed-full;
        &.sidebar-right {
          grid-template-columns: $full-closed;
        }
      }


      // Keep padding on main contents when sidebar is expanded (avoid shifts)
      &:not(.sidebar-right) > .main {
        padding-left: var(--bslib-sidebar-padding-icon);
      }
      &.sidebar-right > .main {
        padding-right: var(--bslib-sidebar-padding-icon);
      }

      // Make main contents transparent while sidebar is expanded
      > .main {
        opacity: 0;
        transition: opacity var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
      }
      &.sidebar-collapsed > .main {
        opacity: 1;
      }
    }
  }
}

.html-fill-container {
  display: flex;
  flex-direction: column;
  /* Prevent the container from expanding vertically or horizontally beyond its
     parent's constraints. */
  min-height: 0;
  min-width: 0;
}
.html-fill-container > .html-fill-item {
  /* Fill items can grow and shrink freely within
     available vertical space in fillable container */
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.html-fill-container > :not(.html-fill-item) {
  /* Prevent shrinking or growing of non-fill items */
  flex: 0 0 auto;
}


// quarto-scss-analysis-annotation { "origin": "'rules' section from Quarto" }



// Tippy customizations

.tippy-box[data-theme~="quarto"] {
  background-color: $body-bg;
  border: solid $border-width $border-color;
  border-radius: $border-radius;
  color: $body-color;
  font-size: $font-size-sm;
}
.tippy-box[data-theme~="quarto"] > .tippy-backdrop {
  background-color: $body-bg;
}
.tippy-box[data-theme~="quarto"] > .tippy-arrow:after,
.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
  content: "";
  position: absolute;
  z-index: -1;
}
.tippy-box[data-theme~="quarto"] > .tippy-arrow:after {
  border-color: transparent;
  border-style: solid;
}

.tippy-box[data-placement^="top"] > .tippy-arrow:before {
  bottom: -6px;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
  top: -6px;
}
.tippy-box[data-placement^="right"] > .tippy-arrow:before {
  left: -6px;
}
.tippy-box[data-placement^="left"] > .tippy-arrow:before {
  right: -6px;
}

.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:before {
  border-top-color: $body-bg;
}
.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:after {
  border-top-color: $border-color;
  border-width: 7px 7px 0;
  top: 17px;
  left: 1px;
}
.tippy-box[data-theme~="quarto"][data-placement^="top"]
  > .tippy-svg-arrow
  > svg {
  top: 16px;
}
.tippy-box[data-theme~="quarto"][data-placement^="top"]
  > .tippy-svg-arrow:after {
  top: 17px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
  > .tippy-arrow:before {
  border-bottom-color: $body-bg;
  bottom: 16px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
  > .tippy-arrow:after {
  border-bottom-color: $border-color;
  border-width: 0 7px 7px;
  bottom: 17px;
  left: 1px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
  > .tippy-svg-arrow
  > svg {
  bottom: 15px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
  > .tippy-svg-arrow:after {
  bottom: 17px;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:before {
  border-left-color: $body-bg;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:after {
  border-left-color: $border-color;
  border-width: 7px 0 7px 7px;
  left: 17px;
  top: 1px;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"]
  > .tippy-svg-arrow
  > svg {
  left: 11px;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"]
  > .tippy-svg-arrow:after {
  left: 12px;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"]
  > .tippy-arrow:before {
  border-right-color: $body-bg;
  right: 16px;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"] > .tippy-arrow:after {
  border-width: 7px 7px 7px 0;
  right: 17px;
  top: 1px;
  border-right-color: $border-color;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"]
  > .tippy-svg-arrow
  > svg {
  right: 11px;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"]
  > .tippy-svg-arrow:after {
  right: 12px;
}
.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow {
  fill: $body-color;
}
.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
  background-size: 16px 6px;
  width: 16px;
  height: 6px;
}


// floating

.top-right {
  position: absolute;
  top: 1em;
  right: 1em;
}

// hidden

// https://github.com/quarto-dev/quarto-cli/issues/5403#issuecomment-1533791947
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.zindex-bottom {
  z-index: -1 !important;
}

// layout and figures

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;
}

// anchor

// anchor js

div[id^="tbl-"] {
  position: relative;
}

.quarto-figure > .anchorjs-link {
  position: absolute;
  top: 0.6em;
  right: 0.5em;
}

div[id^="tbl-"] > .anchorjs-link {
  position: absolute;
  top: 0.7em;
  right: 0.3em;
}

/* workaround for anchorjs not hitting on generic :hover selector */
.quarto-figure:hover > .anchorjs-link,
div[id^="tbl-"]:hover > .anchorjs-link,
h2:hover > .anchorjs-link,
h3:hover > .anchorjs-link,
h4:hover > .anchorjs-link,
h5:hover > .anchorjs-link,
h6:hover > .anchorjs-link,
.reveal-anchorjs-link > .anchorjs-link {
  opacity: 1;
}

#title-block-header {
  margin-block-end: 1rem;
  position: relative;
  margin-top: -1px; // Chrome draws 1px white line between navbar and title block
}

#title-block-header .abstract {
  margin-block-start: 1rem;
}

#title-block-header .abstract .abstract-title {
  font-weight: 600;
}

#title-block-header a {
  text-decoration: none;
}

#title-block-header .author,
#title-block-header .date,
#title-block-header .doi {
  margin-block-end: 0.2rem;
}

#title-block-header .quarto-title-block > div {
  display: flex;
}

#title-block-header .quarto-title-block > div > h1 {
  flex-grow: 1;
}

#title-block-header .quarto-title-block > div > button {
  flex-shrink: 0;
  height: 2.25rem;
  margin-top: 0;
}

#title-block-header .quarto-title-block > div > button {
  @if mixin-exists(media-breakpoint-up) {
    @include media-breakpoint-up(lg) {
      margin-top: 5px;
    }
  }
}

// (Remove bottom margin from paragraphs in table headers)
tr.header > th > p:last-of-type {
  margin-bottom: 0px;
}

table,
table.table {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

caption,
.table-caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
}

figure.quarto-float-tbl figcaption.quarto-float-caption-top {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  text-align: center;
}

figure.quarto-float-tbl figcaption.quarto-float-caption-bottom {
  padding-top: 0.25rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

// utterances
.utterances {
  max-width: none;
  margin-left: -8px;
}

// iframe
iframe {
  margin-bottom: 1em;
}

// details
details {
  margin-bottom: 1em;
}
details[show] {
  margin-bottom: 0;
}

details > summary {
  @if variable-exists(text-muted) {
    color: $text-muted;
  }
}

details > summary > p:only-child {
  display: inline;
}

// codeCopy
pre.sourceCode,
code.sourceCode {
  position: relative;
}

// Inline code should wrap
// See https://github.com/quarto-dev/quarto-cli/issues/2649
dd code:not(.sourceCode),
p code:not(.sourceCode) {
  white-space: pre-wrap;
}

// default to scrolling <code> output rather than wrapping, since
// multi-column tabular output (very common for R & Python) is
// unreadable when wrapped.
code {
  white-space: pre;
}
@media print {
  code {
    white-space: pre-wrap;
  }
}
pre > code {
  display: block;
}

pre > code.sourceCode {
  white-space: $code-white-space;
}

pre > code.sourceCode > span > a:first-child::before {
  text-decoration: none;
}

pre.code-overflow-wrap > code.sourceCode {
  white-space: pre-wrap;
}

pre.code-overflow-scroll > code.sourceCode {
  white-space: pre;
}

// code linking (pkgdown style)
code a:any-link {
  color: inherit;
  text-decoration: none;
}
code a:hover {
  color: inherit;
  text-decoration: underline;
}

// task lists
ul.task-list {
  padding-left: 1em;
}

// tippy

[data-tippy-root] {
  display: inline-block;
}

.tippy-content .footnote-back {
  display: none;
}

.footnote-back {
  margin-left: 0.2em;
}

.tippy-content {
  overflow-x: auto;
}

// embedded source code
.quarto-embedded-source-code {
  display: none;
}

// unresolved crossrefs
.quarto-unresolved-ref {
  font-weight: 600;
}

// html cover image injection
.quarto-cover-image {
  max-width: 35%;
  float: right;
  margin-left: 30px;
}

// provide margin below jupyter widgets
.cell-output-display .widget-subarea {
  margin-bottom: 1em;
}

// fix for selectize inputs getting their contents clipped
// this also works for knitr sql cells (see github issue #3497)
.cell-output-display:not(.no-overflow-x),
.knitsql-table:not(.no-overflow-x) {
  overflow-x: auto;
}

.panel-input {
  margin-bottom: 1em;
}

.panel-input > div,
.panel-input > div > div {
  display: inline-block;
  vertical-align: top;
  padding-right: 12px;
}

.panel-input > p:last-child {
  margin-bottom: 0;
}

.layout-sidebar {
  margin-bottom: 1em;
}

.layout-sidebar .tab-content {
  border: none;
}

.tab-content > .page-columns.active {
  display: grid;
}

// default styling for .code-preview=".." iframes
div.sourceCode > iframe {
  width: 100%;
  height: 300px;

  // this negative-margin hack works around the rendering issue with
  // iframes and parent elements with rounded corners if the border
  // radius for (eg) div.sourceCode is changed, this is likely going
  // to need changing as well.
  @if variable-exists(code-preview-margin-bottom) {
    margin-bottom: $code-preview-margin-bottom;
  } @else {
    margin-bottom: -0.5em;
  }
  @if variable-exists(code-preview-border-color) {
    border: $code-preview-border-color;
  }
}

// link styling
a {
  text-underline-offset: 3px;
}

/* Callout styling */

.callout pre.sourceCode {
  padding-left: 0;
}

// ansi escaping
div.ansi-escaped-output {
  font-family: monospace;
  display: block;
}

/*!
*
* ansi colors from IPython notebook's
*
* we also add `bright-[color]-` synonyms for the `-[color]-intense` classes since
* that seems to be what ansi_up emits
*
*/
/* CSS font colors for translated ANSI escape sequences */
/* The color values are a mix of
   http://www.xcolors.net/dl/baskerville-ivorylight and
   http://www.xcolors.net/dl/euphrasia */
.ansi-black-fg {
  color: #3e424d;
}
.ansi-black-bg {
  background-color: #3e424d;
}
.ansi-black-intense-black,
.ansi-bright-black-fg {
  color: #282c36;
}
.ansi-black-intense-black,
.ansi-bright-black-bg {
  background-color: #282c36;
}
.ansi-red-fg {
  color: #e75c58;
}
.ansi-red-bg {
  background-color: #e75c58;
}
.ansi-red-intense-red,
.ansi-bright-red-fg {
  color: #b22b31;
}
.ansi-red-intense-red,
.ansi-bright-red-bg {
  background-color: #b22b31;
}
.ansi-green-fg {
  color: #00a250;
}
.ansi-green-bg {
  background-color: #00a250;
}
.ansi-green-intense-green,
.ansi-bright-green-fg {
  color: #007427;
}
.ansi-green-intense-green,
.ansi-bright-green-bg {
  background-color: #007427;
}
.ansi-yellow-fg {
  color: #ddb62b;
}
.ansi-yellow-bg {
  background-color: #ddb62b;
}
.ansi-yellow-intense-yellow,
.ansi-bright-yellow-fg {
  color: #b27d12;
}
.ansi-yellow-intense-yellow,
.ansi-bright-yellow-bg {
  background-color: #b27d12;
}
.ansi-blue-fg {
  color: #208ffb;
}
.ansi-blue-bg {
  background-color: #208ffb;
}
.ansi-blue-intense-blue,
.ansi-bright-blue-fg {
  color: #0065ca;
}
.ansi-blue-intense-blue,
.ansi-bright-blue-bg {
  background-color: #0065ca;
}
.ansi-magenta-fg {
  color: #d160c4;
}
.ansi-magenta-bg {
  background-color: #d160c4;
}
.ansi-magenta-intense-magenta,
.ansi-bright-magenta-fg {
  color: #a03196;
}
.ansi-magenta-intense-magenta,
.ansi-bright-magenta-bg {
  background-color: #a03196;
}
.ansi-cyan-fg {
  color: #60c6c8;
}
.ansi-cyan-bg {
  background-color: #60c6c8;
}
.ansi-cyan-intense-cyan,
.ansi-bright-cyan-fg {
  color: #258f8f;
}
.ansi-cyan-intense-cyan,
.ansi-bright-cyan-bg {
  background-color: #258f8f;
}
.ansi-white-fg {
  color: #c5c1b4;
}
.ansi-white-bg {
  background-color: #c5c1b4;
}
.ansi-white-intense-white,
.ansi-bright-white-fg {
  color: #a1a6b2;
}
.ansi-white-intense-white,
.ansi-bright-white-bg {
  background-color: #a1a6b2;
}
.ansi-default-inverse-fg {
  color: #ffffff;
}
.ansi-default-inverse-bg {
  background-color: #000000;
}
.ansi-bold {
  font-weight: bold;
}
.ansi-underline {
  text-decoration: underline;
}

:root {
  --quarto-body-bg: #{$body-bg};
  --quarto-body-color: #{$body-color};
  --quarto-text-muted: #{$text-muted};
  --quarto-border-color: #{$table-border-color};
  --quarto-border-width: #{$border-width};
  @if not variable-exists(enable-rounded) or $enable-rounded == true {
    --quarto-border-radius: #{$border-radius};
  }
}

/* rules to support GT table styling */
table.gt_table {
  color: var(--quarto-body-color);
  font-size: 1em;
  width: 100%; // to match other table styling
  background-color: transparent;
  border-top-width: inherit;
  border-bottom-width: inherit;
  border-color: var(--quarto-border-color);
}

table.gt_table th.gt_column_spanner_outer {
  color: var(--quarto-body-color);
  background-color: transparent;
  border-top-width: inherit;
  border-bottom-width: inherit;
  border-color: var(--quarto-border-color);
}

table.gt_table th.gt_col_heading {
  color: var(--quarto-body-color);
  font-weight: bold;
  background-color: transparent;
}

table.gt_table thead.gt_col_headings {
  border-bottom: 1px solid currentColor;
  border-top-width: inherit;
  border-top-color: var(--quarto-border-color);
}

table.gt_table thead.gt_col_headings:not(:first-child) {
  border-top-width: 1px;
  border-top-color: var(--quarto-border-color);
}

table.gt_table td.gt_row {
  border-bottom-width: 1px;
  border-bottom-color: var(--quarto-border-color);
  border-top-width: 0px;
}

table.gt_table tbody.gt_table_body {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-bottom-color: var(--quarto-border-color);
  border-top-color: currentColor;
}

/* restore previous pandoc columns behavior 
   (too many reports of slide layout breaking)
   see https://github.com/jgm/pandoc/pull/8237
*/
div.columns {
  display: initial;
  gap: initial;
}
div.column {
  display: inline-block;
  overflow-x: initial;
  vertical-align: top;
  width: 50%;
}

// Code Annotation LayoutBoot
.code-annotation-tip-content {
  word-wrap: break-word;
}

.code-annotation-container-hidden {
  display: none !important;
}

dl.code-annotation-container-grid {
  display: grid;
  grid-template-columns: min-content auto;
  dt {
    grid-column: 1;
  }
  dd {
    grid-column: 2;
  }
}

pre.sourceCode.code-annotation-code {
  padding-right: 0;
}

code.sourceCode .code-annotation-anchor {
  z-index: 100;
  position: relative;
  float: right;
  background-color: transparent;
}

// Add a bit of margin to the right of a checkbox
// https://github.com/quarto-dev/quarto-cli/issues/6627
input[type="checkbox"] {
  margin-right: 0.5ch;
}

// Mermaid Theming
// if none come from theme, we need these
$body-color: #222 !default;
$body-bg: #fff !default;
$primary: #468 !default;
$secondary: #999 !default;
$font-family-sans-serif: sans-serif !default;
$font-weight-base: 400 !default;

/* SCSS variables

   These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd

   Make sure to update the docs if you change these.
*/
$mermaid-bg-color: $body-bg !default;
$mermaid-edge-color: $secondary !default;
$mermaid-node-fg-color: $body-color !default;
$mermaid-fg-color: $body-color !default;
$mermaid-fg-color--lighter: lighten($body-color, 10%) !default;
$mermaid-fg-color--lightest: lighten($body-color, 20%) !default;
$mermaid-font-family: $font-family-sans-serif !default;
$mermaid-font-weight: $font-weight-base !default;
$mermaid-label-bg-color: $body-bg !default;
$mermaid-label-fg-color: $primary !default;
$mermaid-node-bg-color: rgba($primary, 0.1) !default;
$mermaid-node-fg-color: $primary !default;

/* CSS variables */
:root {
  --mermaid-bg-color: #{$mermaid-bg-color};
  --mermaid-edge-color: #{$mermaid-edge-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
  --mermaid-fg-color: #{$mermaid-fg-color};
  --mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
  --mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
  --mermaid-font-family: #{$mermaid-font-family};
  --mermaid-label-bg-color: #{$mermaid-label-bg-color};
  --mermaid-label-fg-color: #{$mermaid-label-fg-color};
  --mermaid-node-bg-color: #{$mermaid-node-bg-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
}

@media print {
  :root {
    font-size: 11pt;
  }
  #quarto-sidebar,
  #TOC,
  .nav-page {
    display: none;
  }
  .page-columns .content {
    grid-column-start: page-start;
  }
  .fixed-top {
    position: relative;
  }
  .panel-caption,
  .figure-caption,
  figcaption {
    color: #666;
  }
}

.code-copy-button {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  margin-top: 5px;
  margin-right: 5px;
  background-color: transparent;
  z-index: 3;
}

.code-copy-button:focus {
  outline: none;
}

.code-copy-button-tooltip {
  font-size: 0.75em;
}

#{$code-copy-selector} .code-copy-button > .bi::before {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  content: "";
  vertical-align: -0.125em;
  @if variable-exists(btn-code-copy-color) {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  }
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

#{$code-copy-selector} .code-copy-button-checked > .bi::before {
  @if variable-exists(btn-code-copy-color) {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color)}" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
  }
}

@if variable-exists(btn-code-copy-color-active) {
  #{$code-copy-selector} .code-copy-button:hover > .bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color-active)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  }
  #{$code-copy-selector} .code-copy-button-checked:hover > .bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color-active)}"  viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
  }
}

main {
  ol ol,
  ul ul,
  ol ul,
  ul ol {
    margin-bottom: 1em;
  }
}

// the scss mode for vs code doesn't like the fancy :has(> p) selector, but
// it's valid: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
ul > li:not(:has(> p)) > ul,
ol > li:not(:has(> p)) > ul,
ul > li:not(:has(> p)) > ol,
ol > li:not(:has(> p)) > ol {
  margin-bottom: 0;
}

ul > li:not(:has(> p)) > ul > li:has(> p),
ol > li:not(:has(> p)) > ul > li:has(> p),
ul > li:not(:has(> p)) > ol > li:has(> p),
ol > li:not(:has(> p)) > ol > li:has(> p) {
  margin-top: 1rem;
}

// Grid layout
body {
  margin: 0;
}

// If we're applying display: grid, we're losing our display: border-box
// behavior, so we need to reset bottom margin for title block
main.page-columns > header > h1.title {
  margin-bottom: 0;
}

@include media-breakpoint-up(lg) {
  body {
    .page-columns {
      @include page-columns-default-wide();
    }
  }

  body.fullcontent:not(.floating):not(.docked) {
    .page-columns {
      @include page-columns-fullcontent-wide();
    }
  }

  body.slimcontent:not(.floating):not(.docked) {
    .page-columns {
      @include page-columns-slimcontent-wide();
    }
  }

  body.listing:not(.floating):not(.docked) {
    .page-columns {
      @include page-columns-listing-wide();
    }
  }

  body:not(.floating):not(.docked) {
    .page-columns.toc-left {
      @include page-columns-tocleft-wide();
      .page-columns {
        @include page-columns-tocleft-wide();
      }
    }
  }

  body.floating {
    .page-columns {
      @include page-columns-float-wide();
    }
  }

  body.docked {
    .page-columns {
      @include page-columns-docked-wide();
    }
  }

  body.docked.fullcontent {
    .page-columns {
      @include page-columns-docked-fullcontent-wide();
    }
  }

  body.floating.fullcontent {
    .page-columns {
      @include page-columns-float-fullcontent-wide();
    }
  }

  body.docked.slimcontent {
    .page-columns {
      @include page-columns-docked-slimcontent-wide();
    }
  }

  body.docked.listing {
    .page-columns {
      @include page-columns-docked-listing-wide();
    }
  }

  body.floating.slimcontent {
    .page-columns {
      @include page-columns-float-slimcontent-wide();
    }
  }

  body.floating.listing {
    .page-columns {
      @include page-columns-float-listing-wide();
    }
  }
}

@include media-breakpoint-down(lg) {
  body {
    .page-columns {
      @include page-columns-default-mid();
    }
  }

  body.fullcontent:not(.floating):not(.docked) {
    .page-columns {
      @include page-columns-fullcontent-mid();
    }
  }

  body.slimcontent:not(.floating):not(.docked) {
    .page-columns {
      @include page-columns-slimcontent-mid();
    }
  }

  body.listing:not(.floating):not(.docked) {
    .page-columns {
      @include page-columns-listing-mid();
    }
  }

  body:not(.floating):not(.docked) {
    .page-columns.toc-left {
      @include page-columns-tocleft-mid();
      .page-columns {
        @include page-columns-tocleft-mid();
      }
    }
  }

  body.floating {
    .page-columns {
      @include page-columns-float-mid();
    }
  }

  body.docked {
    .page-columns {
      @include page-columns-docked-mid();
    }
  }

  body.docked.fullcontent {
    .page-columns {
      @include page-columns-docked-fullcontent-mid();
    }
  }

  body.floating.fullcontent {
    .page-columns {
      @include page-columns-float-fullcontent-mid();
    }
  }

  body.docked.slimcontent {
    .page-columns {
      @include page-columns-docked-slimcontent-mid();
    }
  }

  body.docked.listing {
    .page-columns {
      @include page-columns-docked-listing-mid();
    }
  }

  body.floating.slimcontent {
    .page-columns {
      @include page-columns-float-slimcontent-mid();
    }
  }

  body.floating.listing {
    .page-columns {
      @include page-columns-float-listing-mid();
    }
  }
}

@include media-breakpoint-down(md) {
  body,
  body.fullcontent:not(.floating):not(.docked),
  body.slimcontent:not(.floating):not(.docked),
  body.docked,
  body.docked.slimcontent,
  body.docked.fullcontent,
  body.floating,
  body.floating.slimcontent,
  body.floating.fullcontent {
    .page-columns {
      @include page-columns();
      @include grid-template-columns-narrow();
    }
  }

  body:not(.floating):not(.docked) {
    .page-columns.toc-left {
      @include page-columns();
      @include grid-template-columns-narrow();
      .page-columns {
        @include page-columns();
        @include grid-template-columns-narrow();
      }
    }
  }

  nav[role="doc-toc"] {
    display: none;
  }
}

// Positions a header, body, and footer in rows
body,
.page-row-navigation {
  grid-template-rows: [page-top] max-content [contents-top] max-content [contents-bottom] max-content [page-bottom];
}

// Positions contents followed by a region below the content
// (used for pagination controls)
.page-rows-contents {
  grid-template-rows:
    [content-top] minmax(max-content, 1fr) [content-bottom] minmax(
      60px,
      max-content
    )
    [page-bottom];
}

.page-full {
  grid-column: screen-start / screen-end !important;
}

.page-columns > * {
  grid-column: body-content-start / body-content-end;
}

.page-columns.column-page > * {
  grid-column: page-start / page-end;
}
.page-columns.column-page-left .page-columns.page-full > *,
.page-columns.column-page-left > * {
  grid-column: page-start / body-content-end;
}

.page-columns.column-page-right .page-columns.page-full > *,
.page-columns.column-page-right > * {
  grid-column: body-content-start / page-end;
}

// Automatically creates new rows
.page-rows {
  grid-auto-rows: auto;
}

.header {
  grid-column: screen-start / screen-end;
  grid-row: page-top / contents-top;
}

#quarto-content {
  padding: 0;
  grid-column: screen-start / screen-end;
  grid-row: contents-top / contents-bottom;
}

body.floating {
  .sidebar.sidebar-navigation {
    grid-column: page-start / body-start;
    grid-row: content-top / page-bottom;
  }
}

body.docked {
  .sidebar.sidebar-navigation {
    grid-column: screen-start / body-start;
    grid-row: content-top / page-bottom;
  }
}

.sidebar.toc-left {
  grid-column: page-start / body-start;
  grid-row: content-top / page-bottom;
}

.sidebar.margin-sidebar {
  grid-column: body-end / page-end;
  grid-row: content-top / page-bottom;
}

.page-columns .content {
  grid-column: body-content-start / body-content-end;
  grid-row: content-top / content-bottom;
  align-content: flex-start;
}

.page-columns .page-navigation {
  grid-column: body-content-start / body-content-end;
  grid-row: content-bottom / page-bottom;
}

.page-columns .footer {
  grid-column: screen-start / screen-end;
  grid-row: contents-bottom / page-bottom;
}

.page-columns .column-body {
  grid-column: body-content-start / body-content-end;
}

.page-columns .column-body-fullbleed {
  grid-column: body-start / body-end;
}

.page-columns .column-body-outset {
  grid-column: body-start-outset / body-end-outset;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-body-outset-left {
  grid-column: body-start-outset / body-content-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-body-outset-right {
  grid-column: body-content-start / body-end-outset;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-page {
  grid-column: page-start / page-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-page-inset {
  grid-column: page-start-inset / page-end-inset;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-page-inset-left {
  grid-column: page-start-inset / body-content-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-page-inset-right {
  grid-column: body-content-start / page-end-inset;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  figcaption {
    @include column-spanning-element();
  }
}

.page-columns .column-page-left {
  grid-column: page-start / body-content-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-page-right {
  grid-column: body-content-start / page-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  figcaption {
    @include column-spanning-element();
  }
}

#quarto-content.page-columns {
  #quarto-margin-sidebar,
  #quarto-sidebar {
    z-index: 1;
  }

  @include media-breakpoint-down(lg) {
    #quarto-margin-sidebar.collapse,
    #quarto-sidebar.collapse,
    #quarto-margin-sidebar.collapsing,
    #quarto-sidebar.collapsing {
      z-index: $zindex-modal;
    }
  }

  main.column-page,
  main.column-page-right,
  main.column-page-left {
    z-index: 0;
  }
}

.page-columns .column-screen-inset {
  grid-column: screen-start-inset / screen-end-inset;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-screen-inset-left {
  grid-column: screen-start-inset / body-content-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-screen-inset-right {
  grid-column: body-content-start / screen-end-inset;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-screen {
  grid-column: screen-start / screen-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-screen-left {
  grid-column: screen-start / body-content-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-screen-right {
  grid-column: body-content-start / screen-end;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  @include column-spanning-element();
}

.page-columns .column-screen-inset-shaded {
  grid-column: screen-start / screen-end;
  padding: 1em;
  background: $light;
  z-index: $zindex-pagelayout;
  opacity: 0.999;
  margin-bottom: 1em;
}

.zindex-content {
  z-index: $zindex-pagelayout;
  opacity: 0.999;
}

.zindex-modal {
  z-index: $zindex-modal;
  opacity: 0.999;
}

.zindex-over-content {
  z-index: #{$zindex-dropdown - 1};
  opacity: 0.999;
}

img.img-fluid.column-screen,
img.img-fluid.column-screen-inset-shaded,
img.img-fluid.column-screen-inset,
img.img-fluid.column-screen-inset-left,
img.img-fluid.column-screen-inset-right,
img.img-fluid.column-screen-left,
img.img-fluid.column-screen-right {
  width: 100%;
}

@include media-breakpoint-up(lg) {
  .margin-caption,
  div.aside,
  aside:not(.footnotes):not(.sidebar),
  .column-margin {
    grid-column: body-end / page-end !important;
    z-index: $zindex-pagelayout;
  }

  .column-sidebar {
    grid-column: page-start / body-start !important;
    z-index: $zindex-pagelayout;
  }

  .column-leftmargin {
    grid-column: screen-start-inset / body-start !important;
    z-index: $zindex-pagelayout;
  }

  .no-row-height {
    height: 1em;
    overflow: visible;
  }
}

@include media-breakpoint-down(lg) {
  .margin-caption,
  div.aside,
  aside:not(.footnotes):not(.sidebar),
  .column-margin {
    grid-column: body-end / page-end !important;
    z-index: $zindex-pagelayout;
  }

  .no-row-height {
    height: 1em;
    overflow: visible;
  }

  .page-columns.page-full {
    overflow: visible;
  }

  .page-columns.toc-left {
    .margin-caption,
    div.aside,
    aside:not(.footnotes):not(.sidebar),
    .column-margin {
      grid-column: body-content-start / body-content-end !important;
      z-index: $zindex-pagelayout;
      opacity: 0.999;
    }
    .no-row-height {
      height: initial;
      overflow: initial;
    }
  }
}

@include media-breakpoint-down(md) {
  .margin-caption,
  div.aside,
  aside:not(.footnotes):not(.sidebar),
  .column-margin {
    grid-column: body-content-start / body-content-end !important;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
  }
  .no-row-height {
    height: initial;
    overflow: initial;
  }

  #quarto-margin-sidebar {
    display: none;
  }

  #quarto-sidebar-toc-left {
    display: none;
  }

  .hidden-sm {
    display: none;
  }
}

// Panel Grid (custom grid for our panel system)
.panel-grid {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(24, 1fr);
  gap: 1em;
  @include make-cssgrid(24);
}

// Rest of rules
body {
  @if variable-exists(margin-top) {
    margin-top: $margin-top;
  }
  @if variable-exists(margin-bottom) {
    margin-bottom: $margin-bottom;
  }
  @if variable-exists(margin-left) {
    margin-left: $margin-left;
  }
  @if variable-exists(margin-right) {
    margin-right: $margin-right;
  }
}

main {
  margin-top: 1em;
  margin-bottom: 1em;
}

h1,
h2 {
  color: if(
    $headings-color != null,
    $headings-color,
    theme-dim($body-color, 8%)
  );
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: $h1h2h3-font-weight;
}

h1.title {
  margin-top: 0;
}

main.content > section:first-of-type > h2:first-child {
  margin-top: 0;
}

h2 {
  border-bottom: 1px solid $table-border-color;
  padding-bottom: 0.5rem;
}

h3 {
  font-weight: $h1h2h3-font-weight;
}

h3,
h4 {
  opacity: 0.9;
  margin-top: 1.5rem;
}

h5,
h6 {
  opacity: 0.9;
}

.header-section-number {
  @include body-secondary;
}

.nav-link.active .header-section-number {
  color: inherit;
}

mark {
  padding: 0em;
}

// The 1.4 figcaption classes are
//
// quarto-float-caption or quarto-subfloat-caption, depending
// on whether it's a main or subfloat caption.
//
// In addition, the name of the float is added as a class
// as well ("figure", "table", etc, including custom
// float types like a hypothetical "diagram")
//
// this way, custom float types can be both supported and
// offered good defaults.
//
// FIXME right now we're classing all of figcaption,
// but we should clean this up.
.panel-caption,
.figure-caption,
.subfigure-caption,
.table-caption,
figcaption,
caption {
  font-size: 0.9rem;
  @include body-secondary;
}

// as of 1.4, tables emitted by quarto shouldn't have caption
// elements, but we keep this here in case some strange rawhtml
// table sneaks through.
.quarto-layout-cell[data-ref-parent] caption {
  @include body-secondary;
}

.column-margin figcaption,
.margin-caption,
div.aside,
aside,
.column-margin {
  @include body-secondary;
  font-size: 0.825rem;
}

.panel-caption.margin-caption {
  text-align: inherit;
}

.column-margin.column-container p {
  margin-bottom: 0;
}

.column-margin.column-container > *:not(.collapse):first-child {
  padding-bottom: 0.5em;
  display: block;
}

.column-margin.column-container > *:not(.collapse):not(:first-child) {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  display: block;
}

.column-margin.column-container > *.collapse:not(.show) {
  display: none;
}

@include media-breakpoint-up(md) {
  .column-margin.column-container .callout-margin-content:first-child {
    margin-top: 4.5em;
  }
  .column-margin.column-container .callout-margin-content-simple:first-child {
    margin-top: 3.5em;
  }
}

.margin-caption > * {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

// Caption and footnotes

// sort out font size
$code-block-font-size: $small-font-size !default;

// sort out border color
$code-block-border-left-color: $table-border-color !default;
@if type_of($code-block-border-left) == color {
  $code-block-border-left-color: $code-block-border-left;
}

// sort out background color
$code-block-bg-color: quarto-color.adjust(
  $progress-bg,
  $alpha: $code-block-bg-alpha
) !default;
@if type_of($code-block-bg) == color {
  $code-block-bg-color: $code-block-bg;
}

// stack layout panels on mobile devices
@include media-breakpoint-down(md) {
  .quarto-layout-row {
    flex-direction: column;
  }
}

.nav-tabs .nav-item {
  margin-top: 1px;
  cursor: pointer;
}

.tab-content {
  margin-top: 0px;
  border-left: $nav-tabs-border-color $nav-tabs-border-width solid;
  border-right: $nav-tabs-border-color $nav-tabs-border-width solid;
  border-bottom: $nav-tabs-border-color $nav-tabs-border-width solid;
  margin-left: 0;
  padding: 1em;
  margin-bottom: 1em;
}

@include media-breakpoint-down(md) {
  .layout-sidebar {
    margin-left: 0;
    margin-right: 0;
  }
}

.panel-sidebar,
.panel-sidebar .form-control,
.panel-input,
.panel-input .form-control,
.selectize-dropdown {
  font-size: 0.9rem;
}

.panel-sidebar .form-control,
.panel-input .form-control {
  padding-top: 0.1rem;
}

.tab-pane div.sourceCode {
  margin-top: 0px;
}

.tab-pane > p {
  padding-top: 0;
}

.tab-pane > p:nth-child(1) {
  padding-top: 0;
}

.tab-pane > p:last-child {
  margin-bottom: 0;
}

.tab-pane > pre:last-child {
  margin-bottom: 0;
}

.tab-content > .tab-pane:not(.active) {
  display: none !important;
}

div.sourceCode {
  // Clear code background if is not specified
  @if $code-block-bg {
    background-color: $code-block-bg-color;
    border: 1px solid $code-block-bg-color;
    @if $enable-rounded {
      border-radius: $border-radius;
    }
  } @else {
    background-color: $body-bg !important;
    border: none;
    padding: 0;
  }

  @if variable-exists(code-block-color) {
    color: $code-block-color;
  }
}

@if variable-exists(code-block-color) {
  div.sourceCode pre.sourceCode {
    color: $code-block-color;
  }
}

pre.sourceCode {
  background-color: transparent;
}

pre.sourceCode {
  // Border
  @if $code-block-border-left {
    border-left: $code-block-border-left-size;
    border-left-style: $code-block-border-left-style;
    border-left-color: $code-block-border-left-color;
    padding-left: $code-block-padding-left;
    border-right: none;
    border-top: none;
    border-bottom: none;
  } @else {
    border: none;
  }
  font-size: $code-block-font-size;
  overflow: visible !important;
  @if $code-block-bg {
    padding: $code-block-bg-padding;
  }
}

pre.sourceCode > code.sourceCode {
  @if not $code-block-bg {
    padding: 0;
  }
}

div.sourceCode {
  overflow-y: hidden;
}

.callout div.sourceCode {
  margin-left: initial;
}

// improve treatment of blockquotes
.blockquote {
  font-size: inherit;
  padding-left: 1rem;
  padding-right: 1.5rem;
  @include body-secondary;
}

.blockquote {
  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child {
    margin-top: 0;
  }
}

pre {
  background-color: initial;
  padding: initial;
  border: initial;
}

// Maps the pandoc 'monobackgroundcolor' to bootstrap
// Note this only targets code outside of sourceCode blocks
@if variable-exists(mono-background-color) {
  p code:not(.sourceCode),
  li code:not(.sourceCode),
  kbd,
  pre:not(.sourceCode),
  samp {
    background-color: $mono-background-color;
    padding: 0.2em;
  }
}

p pre code:not(.sourceCode),
li pre code:not(.sourceCode),
pre code:not(.sourceCode) {
  background-color: initial;
}

// Default padding if background is set
p code:not(.sourceCode),
li code:not(.sourceCode),
td code:not(.sourceCode) {
  @if variable-exists(mono-background-color) {
    background-color: $mono-background-color;
  } @else if variable-exists(code-bg) {
    background-color: $code-bg;
  }

  @if variable-exists(code-padding) {
    padding: $code-padding;
  } @else if variable-exists(code-bg) {
    padding: 0.2em;
  } @else if variable-exists(mono-background-color) {
    padding: 0.2em;
  }
}

nav p code:not(.sourceCode),
nav li code:not(.sourceCode),
nav td code:not(.sourceCode) {
  background-color: transparent;
  padding: 0;
}

td code:not(.sourceCode) {
  white-space: pre-wrap;
}

#quarto-embedded-source-code-modal > .modal-dialog {
  max-width: 1000px;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

#quarto-embedded-source-code-modal
  > .modal-dialog
  > .modal-content
  > .modal-body {
  padding: 0;
}

#quarto-embedded-source-code-modal
  > .modal-dialog
  > .modal-content
  > .modal-body
  div.sourceCode {
  margin: 0;
  padding: 0.2rem 0.2rem;
  border-radius: 0px;
  border: none;
}

#quarto-embedded-source-code-modal
  > .modal-dialog
  > .modal-content
  > .modal-header {
  padding: 0.7rem;
}

.code-tools-button {
  font-size: 1rem;
  padding: 0.15rem 0.15rem;
  margin-left: 5px;
  color: $text-muted;
  background-color: transparent;
  transition: initial;
  cursor: pointer;
}

.code-tools-button > .bi::before {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  content: "";
  vertical-align: -0.125em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.code-tools-button:hover > .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($body-color)}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
}

#quarto-embedded-source-code-modal .code-copy-button > .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
}

#quarto-embedded-source-code-modal .code-copy-button-checked > .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
}

/* table of contents */
.sidebar {
  will-change: top;
  transition: top 200ms linear;
  position: sticky;
  overflow-y: auto;
  padding-top: 1.2em;
  max-height: 100vh;
}

.sidebar.toc-left,
.sidebar.margin-sidebar {
  top: 0px;
  padding-top: 1em;
}

.sidebar.quarto-banner-title-block-sidebar {
  & > * {
    padding-top: 1.65em;
  }
}

figure .quarto-notebook-link {
  margin-top: 0.5em;
}

.quarto-notebook-link {
  font-size: 0.75em;
  color: $text-muted;
  margin-bottom: 1em;
  text-decoration: none;
  display: block;
}

.quarto-notebook-link:hover {
  text-decoration: underline;
  color: $link-color;
}

.quarto-notebook-link::before {
  display: inline-block;
  height: 0.75rem;
  width: 0.75rem;
  margin-bottom: 0em;
  margin-right: 0.25em;
  content: "";
  vertical-align: -0.125em;

  @if variable-exists(text-muted) {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
  }
  background-repeat: no-repeat;
  background-size: 0.75rem 0.75rem;
}

.toc-actions i.bi,
.quarto-code-links i.bi,
.quarto-other-links i.bi,
.quarto-alternate-notebooks i.bi,
.quarto-alternate-formats i.bi {
  margin-right: 0.4em;
  font-size: $toc-tools-font-size;
}

.quarto-other-links-text-target {
  .quarto-code-links i.bi,
  .quarto-other-links i.bi {
    margin-right: 0.2em;
  }
}

.quarto-other-formats-text-target .quarto-alternate-formats i.bi {
  margin-right: 0.1em;
}

.toc-actions i.bi.empty,
.quarto-code-links i.bi.empty,
.quarto-other-links i.bi.empty,
.quarto-alternate-notebooks i.bi.empty,
.quarto-alternate-formats i.bi.empty {
  padding-left: 1em;
}

.quarto-notebook {
  h2 {
    border-bottom: none;
  }
  .cell-container {
    display: flex;
    .cell {
      flex-grow: 4;
    }
    .cell-decorator {
      padding-top: 1.5em;
      padding-right: 1em;
      text-align: right;
    }

    &.code-fold .cell-decorator {
      padding-top: 3em;
    }
  }
  .cell-code code {
    white-space: pre-wrap;
  }

  .cell .cell-output-stderr pre code,
  .cell .cell-output-stdout pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

.toc-actions,
.quarto-alternate-formats,
.quarto-other-links,
.quarto-code-links,
.quarto-alternate-notebooks {
  padding-left: 0em;
}
.sidebar .toc-actions a,
.sidebar .quarto-alternate-formats a,
.sidebar .quarto-other-links a,
.sidebar .quarto-code-links a,
.sidebar .quarto-alternate-notebooks a,
.sidebar nav[role="doc-toc"] a {
  text-decoration: none;
}

.sidebar .toc-actions a:hover,
.sidebar .quarto-other-links a:hover,
.sidebar .quarto-code-links a:hover,
.sidebar .quarto-alternate-formats a:hover,
.sidebar .quarto-alternate-notebooks a:hover {
  color: $link-color;
}

.sidebar .toc-actions h2,
.sidebar .quarto-code-links h2,
.sidebar .quarto-other-links h2,
.sidebar .quarto-alternate-notebooks h2,
.sidebar .quarto-alternate-formats h2,
.sidebar nav[role="doc-toc"] > h2 {
  font-weight: 500;
  margin-bottom: 0.2rem;
  margin-top: 0.3rem;
  font-family: inherit;
  border-bottom: 0;
  padding-bottom: 0;
  padding-top: 0px;
}

.sidebar .toc-actions > h2,
.sidebar .quarto-code-links > h2,
.sidebar .quarto-other-links > h2,
.sidebar .quarto-alternate-notebooks > h2,
.sidebar .quarto-alternate-formats > h2 {
  font-size: $toc-tools-font-size;
}

.sidebar nav[role="doc-toc"] > h2 {
  font-size: $toc-font-size;
}

.sidebar nav[role="doc-toc"] > ul a {
  border-left: 1px solid $toc-inactive-border;
  padding-left: 0.6rem;
}

.sidebar .toc-actions h2 > ul a,
.sidebar .quarto-code-links h2 > ul a,
.sidebar .quarto-other-links h2 > ul a,
.sidebar .quarto-alternate-notebooks h2 > ul a,
.sidebar .quarto-alternate-formats h2 > ul a {
  border-left: none;
  padding-left: 0.6rem;
}

.sidebar .toc-actions ul a:empty,
.sidebar .quarto-code-links ul a:empty,
.sidebar .quarto-other-links ul a:empty,
.sidebar .quarto-alternate-notebooks ul a:empty,
.sidebar .quarto-alternate-formats ul a:empty,
.sidebar nav[role="doc-toc"] > ul a:empty {
  display: none;
}

.sidebar .toc-actions ul,
.sidebar .quarto-code-links ul,
.sidebar .quarto-other-links ul,
.sidebar .quarto-alternate-notebooks ul,
.sidebar .quarto-alternate-formats ul {
  padding-left: 0;
  list-style: none;
}

.sidebar nav[role="doc-toc"] ul {
  list-style: none;
  padding-left: 0;
  list-style: none;
}

.sidebar nav[role="doc-toc"] > ul {
  margin-left: 0.45em;
}

.quarto-margin-sidebar nav[role="doc-toc"] {
  padding-left: 0.5em;
}

.sidebar .toc-actions > ul,
.sidebar .quarto-code-links > ul,
.sidebar .quarto-other-links > ul,
.sidebar .quarto-alternate-notebooks > ul,
.sidebar .quarto-alternate-formats > ul {
  font-size: $toc-tools-font-size;
}

.sidebar nav[role="doc-toc"] > ul {
  font-size: $toc-font-size;
}

.sidebar .toc-actions ul li a,
.sidebar .quarto-code-links ul li a,
.sidebar .quarto-other-links ul li a,
.sidebar .quarto-alternate-notebooks ul li a,
.sidebar .quarto-alternate-formats ul li a,
.sidebar nav[role="doc-toc"] > ul li a {
  line-height: 1.1rem;
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
  color: inherit;
}

$toc-indent-depth: 5;
$indent: 1.2em;
@for $i from 1 through $toc-indent-depth {
  $selector-depth: repeat-chars(" ul > li >", $i);

  .sidebar nav[role="doc-toc"] ul > li > #{$selector-depth} a {
    padding-left: #{$indent * $i};
  }
}

.sidebar nav[role="doc-toc"] ul > li > a.active,
.sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
  border-left: 1px solid $toc-active-border;
  color: $toc-color !important;
}

.sidebar nav[role="doc-toc"] ul > li > a:hover,
.sidebar nav[role="doc-toc"] ul > li > ul > li > a:hover {
  color: $toc-color !important;
}

// tweaking default keyboard settings
kbd,
.kbd {
  color: $body-color;
  @if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
    background-color: shift-color($gray-100, 70%);
  } @else {
    background-color: $gray-100;
  }
  border: 1px solid;
  border-radius: 5px;
  border-color: $table-border-color;
}

// tweak pandoc default hanging indent
.quarto-appendix-contents div.hanging-indent {
  margin-left: 0em;
}

.quarto-appendix-contents div.hanging-indent div.csl-entry {
  margin-left: 1em;
  text-indent: -1em;
}

// footnotes/citations
.citation a,
.footnote-ref {
  text-decoration: none;
}
.footnotes ol {
  padding-left: 1em;
}
.tippy-content > * {
  margin-bottom: 0.7em;
}
.tippy-content > *:last-child {
  margin-bottom: 0;
}

@if $code-block-border-left {
  // Align source code and callout text (not border) with main body text when there is room
  @include media-breakpoint-up(lg) {
    // Cards with header
    .callout:not(.no-icon) {
      margin-left: add(add(-0.4em, -$callout-border-width), -1px);
    }

    .callout {
      margin-left: add(-0.4em, -$callout-border-width);
    }

    div.sourceCode {
      margin-left: add(
        add(-$code-block-padding-left, -$code-block-border-left-size),
        2px
      );
    }
  }
}

// Callouts

.callout {
  margin-top: $callout-margin-top;
  margin-bottom: $callout-margin-bottom;
  border-radius: $border-radius;
  overflow-wrap: break-word;
}

.callout .callout-title-container {
  overflow-wrap: anywhere;
}

.callout.callout-style-simple {
  padding: 0.4em 0.7em;
  border-left: $callout-border-width solid;
  border-right: 1px solid $table-border-color;
  border-top: 1px solid $table-border-color;
  border-bottom: 1px solid $table-border-color;
}

.callout.callout-style-default {
  border-left: $callout-border-width solid;
  border-right: 1px solid $table-border-color;
  border-top: 1px solid $table-border-color;
  border-bottom: 1px solid $table-border-color;
}

.callout .callout-body-container {
  flex-grow: 1;
}

.callout.callout-style-simple .callout-body {
  font-size: 0.9rem;
  font-weight: 400;
}

.callout.callout-style-default .callout-body {
  font-size: 0.9rem;
  font-weight: 400;
}

.callout:not(.no-icon).callout-titled.callout-style-simple .callout-body {
  padding-left: 1.6em;
}

.callout.callout-titled > .callout-header {
  padding-top: 0.2em;
  margin-bottom: -0.2em;
}

.callout.callout-style-simple > div.callout-header {
  border-bottom: none;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 75%;
}

.callout.callout-style-default > div.callout-header {
  border-bottom: none;
  font-weight: 600;
  opacity: 85%;
  font-size: 0.9rem;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.callout.callout-style-default .callout-body {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.callout.callout-style-default .callout-body > :first-child {
  padding-top: 0.5rem;
  margin-top: 0;
}

.callout > div.callout-header[data-bs-toggle="collapse"] {
  cursor: pointer;
}

.callout.callout-style-default .callout-header[aria-expanded="false"],
.callout.callout-style-default .callout-header[aria-expanded="true"] {
  padding-top: 0px;
  margin-bottom: 0px;
  align-items: center;
}

.callout.callout-titled .callout-body > :last-child:not(.sourceCode),
.callout.callout-titled .callout-body > div > :last-child:not(.sourceCode) {
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}

.callout:not(.callout-titled) .callout-body > :first-child,
.callout:not(.callout-titled) .callout-body > div > :first-child {
  margin-top: 0.25rem;
}

.callout:not(.callout-titled) .callout-body > :last-child,
.callout:not(.callout-titled) .callout-body > div > :last-child {
  margin-bottom: 0.2rem;
}

$code-block-border-left-color: $table-border-color !default;

.callout.callout-style-simple .callout-icon::before,
.callout.callout-style-simple .callout-toggle::before {
  height: 1rem;
  width: 1rem;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.callout.callout-style-default .callout-icon::before,
.callout.callout-style-default .callout-toggle::before {
  height: 0.9rem;
  width: 0.9rem;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: 0.9rem 0.9rem;
}

.callout.callout-style-default .callout-toggle::before {
  margin-top: 5px;
}

.callout .callout-btn-toggle .callout-toggle::before {
  transition: transform 0.2s linear;
}

.callout .callout-header[aria-expanded="false"] .callout-toggle::before {
  transform: rotate(-90deg);
}

.callout .callout-header[aria-expanded="true"] .callout-toggle::before {
  transform: none;
}

.callout.callout-style-simple:not(.no-icon) div.callout-icon-container {
  padding-top: 0.2em;
  padding-right: 0.55em;
}

.callout.callout-style-default:not(.no-icon) div.callout-icon-container {
  padding-top: 0.1em;
  padding-right: 0.35em;
}

.callout.callout-style-default:not(.no-icon) div.callout-title-container {
  margin-top: -1px;
}

.callout.callout-style-default.callout-caution:not(.no-icon)
  div.callout-icon-container {
  padding-top: 0.3em;
  padding-right: 0.35em;
}

.callout > .callout-body > .callout-icon-container > .no-icon,
.callout > .callout-header > .callout-icon-container > .no-icon {
  display: none;
}

// Default values for callout colors
$callout-color-note: $blue !default;
$callout-color-tip: $green !default;
$callout-color-important: $red !default;
$callout-color-caution: $orange !default;
$callout-color-warning: $yellow !default;

// Generate per callout type css to customize their appearance
// Define the callouts for which we should define styles
$callouts: (
  // NOTE
  "note":
    (
      "color": $callout-color-note,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>',
    ),
  // TIP
  "tip":
    (
      "color": $callout-color-tip,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/></svg>',
    ),
  // WARNING
  "warning":
    (
      "color": $callout-color-warning,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></svg>',
    ),
  // CAUTION
  "caution":
    (
      "color": $callout-color-caution,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cone-striped" viewBox="0 0 16 16"><path d="M9.97 4.88l.953 3.811C10.158 8.878 9.14 9 8 9c-1.14 0-2.159-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.274 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/></svg>',
    ),
  // IMPORTANT
  "important":
    (
      "color": $callout-color-important,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>',
    )
);

div.callout.callout {
  border-left-color: $text-muted;
}

div.callout.callout-style-default > .callout-header {
  background-color: $text-muted;
}

@each $name, $info in $callouts {
  div.callout-#{$name}.callout {
    border-left-color: shift-color(
      quarto-map.get($info, "color"),
      $callout-border-scale
    );
  }

  div.callout-#{$name}.callout-style-default > .callout-header {
    @if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
      background-color: shift-color(quarto-map.get($info, "color"), 70%);
    } @else {
      background-color: shift-color(quarto-map.get($info, "color"), -90%);
    }
  }

  $shifted-color: #{shift-color(
      quarto-map.get($info, "color"),
      $callout-icon-scale
    )};
  $shifted-color-svg: str-replace($shifted-color, "#", "%23");

  div.callout-#{$name}:not(.callout-titled) .callout-icon::before {
    background-image: #{"url('data:image/svg+xml," +
      str-replace(
        quarto-map.get($info, "icon"),
        'fill="currentColor"',
        'style="fill: #{$shifted-color-svg}"'
      ) +
      "');"};
  }

  div.callout-#{$name}.callout-titled .callout-icon::before {
    background-image: #{"url('data:image/svg+xml," +
      str-replace(
        quarto-map.get($info, "icon"),
        'fill="currentColor"',
        'style="fill: #{$shifted-color-svg}"'
      ) +
      "');"};
  }

  div.callout-#{$name} .callout-toggle::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($body-color)}" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
  }
}

.quarto-toggle-container {
  display: flex;
  align-items: center;
}

// dark mode
.quarto-reader-toggle .bi::before,
.quarto-color-scheme-toggle .bi::before {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  content: "";
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.sidebar-navigation {
  padding-left: 20px;
}

.navbar {
  background-color: $navbar-bg;
  color: $navbar-fg;
}

.navbar .quarto-color-scheme-toggle:not(.alternate) .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
}

.navbar .quarto-color-scheme-toggle.alternate .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
}

.sidebar-navigation .quarto-color-scheme-toggle:not(.alternate) .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
}

.sidebar-navigation .quarto-color-scheme-toggle.alternate .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
}

// sidebar handling
.quarto-sidebar-toggle {
  border-color: $border-color;
  border-bottom-left-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  border-top-width: 0px;
  padding-top: 0px !important;
}

.quarto-sidebar-toggle-title {
  cursor: pointer;
  padding-bottom: 2px;
  margin-left: 0.25em;
  text-align: center;
  font-weight: 400;
  font-size: 0.775em;
}

#quarto-content {
  .quarto-sidebar-toggle {
    background: theme-dim($body-bg, 2%);
  }

  .quarto-sidebar-toggle-title {
    color: $body-color;
  }
}

.quarto-sidebar-toggle-icon {
  color: $border-color;
  margin-right: 0.5em;
  float: right;
  transition: transform 0.2s ease;
}

.quarto-sidebar-toggle-icon::before {
  padding-top: 5px;
}

.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-icon {
  transform: rotate(-180deg);
}

.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-title {
  border-bottom: solid $border-color 1px;
}

.quarto-sidebar-toggle-contents {
  background-color: $body-bg;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 0px !important;
  transition: max-height 0.5s ease;
}

.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-contents {
  padding-top: 1em;
  padding-bottom: 10px;
}

.sidebar-menu-container {
  @include media-breakpoint-down(md) {
    padding-bottom: 5em;
  }
}

.quarto-sidebar-toggle:not(.expanded) .quarto-sidebar-toggle-contents {
  padding-top: 0px !important;
  padding-bottom: 0px;
}

nav[role="doc-toc"] {
  z-index: $zindex-sticky;
}

#quarto-sidebar > *,
nav[role="doc-toc"] > * {
  transition: opacity 0.1s ease, border 0.1s ease;
}

#quarto-sidebar.slow > *,
nav[role="doc-toc"].slow > * {
  transition: opacity 0.4s ease, border 0.4s ease;
}

.quarto-color-scheme-toggle:not(.alternate).top-right .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 35%))}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
}

.quarto-color-scheme-toggle.alternate.top-right .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 20%))}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
}

// Quarto Appendix Treatment
#quarto-appendix.default {
  border-top: 1px solid $border-color;
}

#quarto-appendix.default {
  background-color: $body-bg;
  padding-top: 1.5em;
  margin-top: 2em;
  z-index: $zindex-pagelayout;

  .quarto-appendix-heading {
    margin-top: 0;
    line-height: 1.4em;
    font-weight: 600;
    opacity: 0.9;
    border-bottom: none;
    margin-bottom: 0;
  }

  // Remove botoom margin from specific elements
  .footnotes ol,
  .footnotes ol li > p:last-of-type,
  .quarto-appendix-contents > p:last-of-type {
    margin-bottom: 0;
  }

  .footnotes ol {
    margin-left: 0.5em;
  }

  .quarto-appendix-secondary-label {
    margin-bottom: 0.4em;
  }

  .quarto-appendix-bibtex {
    font-size: 0.7em;
    padding: 1em;
    border: solid 1px $border-color;
    margin-bottom: 1em;
    code.sourceCode {
      white-space: pre-wrap;
    }
  }

  .quarto-appendix-citeas {
    font-size: 0.9em;
    padding: 1em;
    border: solid 1px $border-color;
    margin-bottom: 1em;
  }

  .quarto-appendix-heading {
    font-size: 1em !important;
  }

  *[role="doc-endnotes"] > ol,
  .quarto-appendix-contents > *:not(h2) {
    font-size: 0.9em;
  }

  section {
    padding-bottom: 1.5em;
    *[role="doc-endnotes"],
    > *:not(a) {
      opacity: 0.9;
      word-wrap: break-word;
    }
  }
}

.btn.btn-quarto,
div.cell-output-display .btn-quarto {
  @include button-variant(
    $btn-bg,
    $btn-bg,
    $btn-fg,
    //if($btn-bg == $color-contrast-light, shade-color($btn-bg, $btn-hover-bg-shade-amount), tint-color($btn-bg, $btn-hover-bg-tint-amount)),
    //if($btn-bg == $color-contrast-light, shade-color($btn-bg, $btn-hover-border-shade-amount), tint-color($btn-bg, $btn-hover-border-tint-amount)),
    $hover-color: $btn-fg
  );
}

// Quarto title block treatment
nav.quarto-secondary-nav.color-navbar {
  @if variable-exists(navbar-bg) {
    background-color: $navbar-bg;
  }

  @if (variable-exists(navbar-fg)) {
    color: $navbar-fg;
  }
}
nav.quarto-secondary-nav.color-navbar h1,
nav.quarto-secondary-nav.color-navbar .quarto-btn-toggle {
  @if (variable-exists(navbar-fg)) {
    color: $navbar-fg;
  }
}

body.nav-sidebar {
  @include media-breakpoint-down(lg) {
    .quarto-title-banner {
      margin-bottom: 0;
      padding-bottom: 1em;
    }
    #title-block-header {
      margin-block-end: 0;
    }
  }
}

p.subtitle {
  margin-top: 0.25em;
  margin-bottom: 0.5em;
}

// downlit links
code a:any-link {
  color: inherit;
  text-decoration-color: $gray-600;
}

// This is a sentinel value that renderers can use to determine
// whether the theme is dark or light
@if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
  /*! dark */
} @else {
  /*! light */
}

// observable UI element tweaks to support light-mode vs dark-mode
div.observablehq table thead tr th {
  background-color: var(--bs-body-bg);
}

input,
button,
select,
optgroup,
textarea {
  background-color: var(--bs-body-bg);
}

// Code Annotation

.code-annotated .code-copy-button {
  margin-right: 1.25em;
  margin-top: 0;
  padding-bottom: 0;
  padding-top: 3px;
}

.code-annotation-gutter-bg {
  background-color: $body-bg;
}

.code-annotation-gutter {
  background-color: $code-block-bg-color;
}

.code-annotation-gutter,
.code-annotation-gutter-bg {
  height: 100%;
  width: calc(20px + 0.5em);
  position: absolute;
  top: 0;
  right: 0;
}

dl.code-annotation-container-grid {
  dt {
    margin-right: 1em;
    margin-top: 0.25rem;
  }
}

dl.code-annotation-container-grid {
  dt {
    font-family: $font-family-code;
    color: theme-dim($body-color, 10%);
    border: solid theme-dim($body-color, 10%) 1px;
    border-radius: 50%;
    height: 22px;
    width: 22px;
    line-height: 22px;
    font-size: 11px;

    text-align: center;
    vertical-align: middle;

    text-decoration: none;
  }

  dt[data-target-cell] {
    cursor: pointer;
  }

  dt[data-target-cell].code-annotation-active {
    color: $body-bg;
    border: solid #aaaaaa 1px;
    background-color: #aaaaaa;
  }
}

pre.code-annotation-code {
  padding-top: 0;
  padding-bottom: 0;
  code {
    z-index: 3;
  }
}

#code-annotation-line-highlight-gutter {
  width: 100%;
  border-top: solid $code-annotation-higlight-color 1px;
  border-bottom: solid $code-annotation-higlight-color 1px;
  z-index: 2;
  background-color: $code-annotation-higlight-bg;
}

#code-annotation-line-highlight {
  margin-left: -4em;
  width: calc(100% + 4em);
  border-top: solid $code-annotation-higlight-color 1px;
  border-bottom: solid $code-annotation-higlight-color 1px;
  z-index: 2;
  background-color: $code-annotation-higlight-bg;
}

code.sourceCode .code-annotation-anchor.code-annotation-active {
  background-color: var(--quarto-hl-normal-color, #aaaaaa);
  border: solid var(--quarto-hl-normal-color, #aaaaaa) 1px;
  color: rgb(
    red($code-block-bg-color),
    green($code-block-bg-color),
    blue($code-block-bg-color)
  );
  font-weight: bolder;
}

code.sourceCode .code-annotation-anchor {
  font-family: $font-family-code;
  color: var(--quarto-hl-co-color);
  border: solid var(--quarto-hl-co-color) 1px;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  font-size: 9px;
  margin-top: 2px;
}

code.sourceCode button.code-annotation-anchor {
  padding: 2px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}

code.sourceCode a.code-annotation-anchor {
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  cursor: default;
  text-decoration: none;
}

// change .column-screen-* to behave like .column-page (which hugs the body margins)
// cf https://github.com/quarto-dev/quarto-cli/issues/1824#issuecomment-1216018434
@media print {
  .page-columns .column-screen-inset {
    grid-column: page-start-inset / page-end-inset;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
    @include column-spanning-element();
  }

  .page-columns .column-screen-inset-left {
    grid-column: page-start-inset / body-content-end;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
    @include column-spanning-element();
  }

  .page-columns .column-screen-inset-right {
    grid-column: body-content-start / page-end-inset;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
    @include column-spanning-element();
  }

  .page-columns .column-screen {
    grid-column: page-start / page-end;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
    @include column-spanning-element();
  }

  .page-columns .column-screen-left {
    grid-column: page-start / body-content-end;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
    @include column-spanning-element();
  }

  .page-columns .column-screen-right {
    grid-column: body-content-start / page-end;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
    @include column-spanning-element();
  }

  .page-columns .column-screen-inset-shaded {
    grid-column: page-start-inset / page-end-inset;
    padding: 1em;
    background: $light;
    z-index: $zindex-pagelayout;
    opacity: 0.999;
    margin-bottom: 1em;
  }
}

.quarto-video {
  margin-bottom: 1em;
}

.table {
  // Tables get a light top and bottom border (whether or not they have a head
  // and independent of caption position)
  border-top: $table-border-width solid $table-group-separator-color-lighter;
  border-bottom: $table-border-width solid $table-group-separator-color-lighter;

  // The heading gets a heavier line to differentiate it
  > thead {
    border-top-width: 0;
    border-bottom: 1px solid $table-group-separator-color;
  }

  // Allow breaking inside tables
  a {
    word-break: break-word;
  }

  // This disables new styling taken from boostrap that overrides
  // table level styling
  // See https://github.com/quarto-dev/quarto-cli/issues/7566
  > :not(caption) > * > * {
    background-color: unset;
    color: unset;
  }
}

// Special Cross Talk Handling
#quarto-document-content {
  .crosstalk-input .checkbox input[type="checkbox"],
  .crosstalk-input .checkbox-inline input[type="checkbox"] {
    position: unset;
    margin-top: unset;
    margin-left: unset;
  }

  .row {
    margin-left: unset;
    margin-right: unset;
  }
}

.quarto-xref {
  white-space: nowrap;
}

#quarto-draft-alert {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0.3em;
  text-align: center;
  font-size: 0.9em;

  i {
    margin-right: 0.3em;
  }
}

#quarto-back-to-top {
  z-index: 1000;
}

// override _reboot.scss

// code blocks
pre {
  font-family: $font-family-monospace-block;
  // I'm really not confident that this is correct
  @include font-size($code-block-font-size);
  font-weight: $font-weight-monospace-block;

  // adding these inherit overrides here
  // is what `_reboot.scss` does.
  // we mirror it here for consistency
  //
  // Account for some code outputs that place code tags in pre tags
  code {
    font-family: inherit;
    @include font-size(inherit);
    font-weight: inherit;
  }
}

// code inlines
code {
  font-family: $font-family-monospace-inline;
  @include font-size($code-inline-font-size);
  font-weight: $font-weight-monospace-inline;
}

// link styling
a {
  background-color: $link-color-bg;
  font-weight: $link-weight;
  text-decoration: $link-decoration;
}


  $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
  /*! quarto-variables-start */
  :root {
    --quarto-font-monospace: #{inspect($font-family-monospace)};
  }
  /*! quarto-variables-end */
  
a.external:after {
  content: "";
  @if variable-exists(link-color) {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($link-color)}" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');
  }
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.2em;
  padding-right: 0.75em;
}

div.sourceCode code a.external:after {
  content: none;
}

a.external:after:hover {
  cursor: pointer;
}

.quarto-ext-icon {
  display: inline-block;
  font-size: 0.75em;
  padding-left: 0.3em;
}

.code-with-filename .code-with-filename-file {
  margin-bottom: 0;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 0.7em;
  border: var(--quarto-border-width) solid var(--quarto-border-color);
  border-radius: var(--quarto-border-radius);
  border-bottom: 0;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
}

.code-with-filename div.sourceCode,
.reveal .code-with-filename div.sourceCode {
  margin-top: 0;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
}

.code-with-filename .code-with-filename-file pre {
  margin-bottom: 0;
}

.code-with-filename .code-with-filename-file {
  background-color: rgba(219, 219, 219, 0.8);
}

.quarto-dark .code-with-filename .code-with-filename-file {
  background-color: #555;
}

.code-with-filename .code-with-filename-file strong {
  font-weight: 400;
}


// quarto-scss-analysis-annotation { "origin": "'rules' section from user-defined SCSS" }


/* Title Banner */
.quarto-title-banner {
  margin-bottom: 1em;

  color: bannerColor();
  background: bannerBg();
  @if $title-banner-image {
    background-image: $title-banner-image;
    background-size: cover;
  }
  a {
    color: bannerColor();
  }

  h1,
  h2 {
    color: bannerColor();
  }

  .code-tools-button {
    color: bannerDim();
  }
  .code-tools-button:hover {
    color: bannerColor();
  }

  .code-tools-button > .bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB(bannerDim())}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
  }

  .code-tools-button:hover > .bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB(bannerColor())}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
  }

  .quarto-title .title {
    font-weight: 600;
  }

  .quarto-categories {
    margin-top: 0.75em;
  }

  @include media-breakpoint-up(lg) {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }

  @include media-breakpoint-down(lg) {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}
@include media-breakpoint-down(md) {
  body.hypothesis-enabled {
    #title-block-header > * {
      padding-right: 20px;
    }
  }
}

main.quarto-banner-title-block > section:first-child > h2,
main.quarto-banner-title-block > section:first-child > h3,
main.quarto-banner-title-block > section:first-child > h4 {
  margin-top: 0;
}

.quarto-title {
  .quarto-categories {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
    column-gap: 0.4em;
    padding-bottom: 0.5em;
    margin-top: 0.75em;

    .quarto-category {
      padding: 0.25em 0.75em;
      font-size: 0.65em;
      text-transform: uppercase;
      border: solid 1px;
      border-radius: $border-radius;
      opacity: 0.6;

      a {
        color: inherit;
      }
    }
  }
}

/* Manuscript customization */
.quarto-title-meta-container {
  display: grid;
  grid-template-columns: 1fr auto;
}

.quarto-title-meta-column-end {
  display: flex;
  flex-direction: column;
  padding-left: 1em;
}

.quarto-title-meta-column-end a .bi {
  margin-right: 0.3em;
}

/* Title Default */
#title-block-header.quarto-title-block.default {
  .quarto-title-meta {
    display: grid;
    // See https://github.com/quarto-dev/quarto-cli/issues/9539
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1em;
  }

  .quarto-title {
    .title {
      margin-bottom: 0;
    }
  }

  .quarto-title-author-orcid {
    img {
      margin-top: -0.2em;
      height: 0.8em;
      width: 0.8em;
    }
  }

  .quarto-title-author-email {
    opacity: 0.7;
  }

  .quarto-description {
    p:last-of-type {
      margin-bottom: 0;
    }
  }

  .quarto-title-meta-contents p,
  .quarto-title-authors p,
  .quarto-title-affiliations p {
    margin-bottom: 0.1em;
  }

  .quarto-title-meta-heading {
    text-transform: uppercase;
    margin-top: 1em;
    font-size: 0.8em;
    opacity: 0.8;
    font-weight: 400;
  }

  .quarto-title-meta-contents {
    font-size: 0.9em;
    p.affiliation:last-of-type {
      margin-bottom: 0.1em;
    }
  }

  p.affiliation {
    margin-bottom: 0.1em;
  }

  .keywords,
  .description,
  .abstract {
    margin-top: 0;

    & > p {
      font-size: 0.9em;
    }
    & > p:last-of-type {
      margin-bottom: 0;
    }

    .block-title {
      margin-top: 1em;
      text-transform: uppercase;
      font-size: 0.8em;
      opacity: 0.8;
      font-weight: 400;
    }
  }

  .quarto-title-meta-author {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) 1fr;
    grid-column-gap: 1em;
  }
}

.quarto-title-tools-only {
  display: flex;
  justify-content: right;
}



// Variables

$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap" !default;
@if $web-font-path {
  @import url($web-font-path);
}

// Typography

body {
  -webkit-font-smoothing: antialiased;
}

// Indicators

.badge {
  &.bg-light {
    color: $dark;
  }
}

// Progress bars

.progress {
  @include box-shadow(none);

  .progress-bar {
    font-size: 8px;
    line-height: 8px;
  }
}


// quarto-scss-analysis-annotation { "origin": null }


// quarto-scss-analysis-annotation { "origin": null }