's hover style\n &:hover {\n color: var(--#{$prefix}btn-close-color);\n text-decoration: none;\n opacity: var(--#{$prefix}btn-close-hover-opacity);\n }\n\n &:focus {\n outline: 0;\n box-shadow: var(--#{$prefix}btn-close-focus-shadow);\n opacity: var(--#{$prefix}btn-close-focus-opacity);\n }\n\n &:disabled,\n &.disabled {\n pointer-events: none;\n user-select: none;\n opacity: var(--#{$prefix}btn-close-disabled-opacity);\n }\n}\n\n@mixin btn-close-white() {\n filter: var(--#{$prefix}btn-close-white-filter);\n}\n\n.btn-close-white {\n @include btn-close-white();\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark) {\n .btn-close {\n @include btn-close-white();\n }\n }\n}\n", ".toast {\n // scss-docs-start toast-css-vars\n --#{$prefix}toast-zindex: #{$zindex-toast};\n --#{$prefix}toast-padding-x: #{$toast-padding-x};\n --#{$prefix}toast-padding-y: #{$toast-padding-y};\n --#{$prefix}toast-spacing: #{$toast-spacing};\n --#{$prefix}toast-max-width: #{$toast-max-width};\n @include rfs($toast-font-size, --#{$prefix}toast-font-size);\n --#{$prefix}toast-color: #{$toast-color};\n --#{$prefix}toast-bg: #{$toast-background-color};\n --#{$prefix}toast-border-width: #{$toast-border-width};\n --#{$prefix}toast-border-color: #{$toast-border-color};\n --#{$prefix}toast-border-radius: #{$toast-border-radius};\n --#{$prefix}toast-box-shadow: #{$toast-box-shadow};\n --#{$prefix}toast-header-color: #{$toast-header-color};\n --#{$prefix}toast-header-bg: #{$toast-header-background-color};\n --#{$prefix}toast-header-border-color: #{$toast-header-border-color};\n // scss-docs-end toast-css-vars\n\n width: var(--#{$prefix}toast-max-width);\n max-width: 100%;\n @include font-size(var(--#{$prefix}toast-font-size));\n color: var(--#{$prefix}toast-color);\n pointer-events: auto;\n background-color: var(--#{$prefix}toast-bg);\n background-clip: padding-box;\n border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);\n box-shadow: var(--#{$prefix}toast-box-shadow);\n @include border-radius(var(--#{$prefix}toast-border-radius));\n\n &.showing {\n opacity: 0;\n }\n\n &:not(.show) {\n display: none;\n }\n}\n\n.toast-container {\n --#{$prefix}toast-zindex: #{$zindex-toast};\n\n position: absolute;\n z-index: var(--#{$prefix}toast-zindex);\n width: max-content;\n max-width: 100%;\n pointer-events: none;\n\n > :not(:last-child) {\n margin-bottom: var(--#{$prefix}toast-spacing);\n }\n}\n\n.toast-header {\n display: flex;\n align-items: center;\n padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);\n color: var(--#{$prefix}toast-header-color);\n background-color: var(--#{$prefix}toast-header-bg);\n background-clip: padding-box;\n border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);\n @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));\n\n .btn-close {\n margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list\n margin-left: var(--#{$prefix}toast-padding-x);\n }\n}\n\n.toast-body {\n padding: var(--#{$prefix}toast-padding-x);\n word-wrap: break-word;\n}\n", "// stylelint-disable function-disallowed-list\n\n// .modal-open - body class for killing the scroll\n// .modal - container to scroll within\n// .modal-dialog - positioning shell for the actual modal\n// .modal-content - actual modal w/ bg and corners and stuff\n\n\n// Container that the modal scrolls within\n.modal {\n // scss-docs-start modal-css-vars\n --#{$prefix}modal-zindex: #{$zindex-modal};\n --#{$prefix}modal-width: #{$modal-md};\n --#{$prefix}modal-padding: #{$modal-inner-padding};\n --#{$prefix}modal-margin: #{$modal-dialog-margin};\n --#{$prefix}modal-color: #{$modal-content-color};\n --#{$prefix}modal-bg: #{$modal-content-bg};\n --#{$prefix}modal-border-color: #{$modal-content-border-color};\n --#{$prefix}modal-border-width: #{$modal-content-border-width};\n --#{$prefix}modal-border-radius: #{$modal-content-border-radius};\n --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};\n --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};\n --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};\n --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};\n --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y\n --#{$prefix}modal-header-border-color: #{$modal-header-border-color};\n --#{$prefix}modal-header-border-width: #{$modal-header-border-width};\n --#{$prefix}modal-title-line-height: #{$modal-title-line-height};\n --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};\n --#{$prefix}modal-footer-bg: #{$modal-footer-bg};\n --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};\n --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};\n // scss-docs-end modal-css-vars\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--#{$prefix}modal-zindex);\n display: none;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n // Prevent Chrome on Windows from adding a focus outline. For details, see\n // https://github.com/twbs/bootstrap/pull/10951.\n outline: 0;\n // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a\n // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n // See also https://github.com/twbs/bootstrap/issues/17695\n}\n\n// Shell div to position the modal with bottom padding\n.modal-dialog {\n position: relative;\n width: auto;\n margin: var(--#{$prefix}modal-margin);\n // allow clicks to pass through for custom click handling to close modal\n pointer-events: none;\n\n // When fading in the modal, animate it to slide down\n .modal.fade & {\n @include transition($modal-transition);\n transform: $modal-fade-transform;\n }\n .modal.show & {\n transform: $modal-show-transform;\n }\n\n // When trying to close, animate focus to scale\n .modal.modal-static & {\n transform: $modal-scale-transform;\n }\n}\n\n.modal-dialog-scrollable {\n height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n\n .modal-content {\n max-height: 100%;\n overflow: hidden;\n }\n\n .modal-body {\n overflow-y: auto;\n }\n}\n\n.modal-dialog-centered {\n display: flex;\n align-items: center;\n min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n}\n\n// Actual modal\n.modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`\n // counteract the pointer-events: none; in the .modal-dialog\n color: var(--#{$prefix}modal-color);\n pointer-events: auto;\n background-color: var(--#{$prefix}modal-bg);\n background-clip: padding-box;\n border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);\n @include border-radius(var(--#{$prefix}modal-border-radius));\n @include box-shadow(var(--#{$prefix}modal-box-shadow));\n // Remove focus outline from opened modal\n outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n // scss-docs-start modal-backdrop-css-vars\n --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};\n --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};\n --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};\n // scss-docs-end modal-backdrop-css-vars\n\n @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));\n}\n\n// Modal header\n// Top section of the modal w/ title and dismiss\n.modal-header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding: var(--#{$prefix}modal-header-padding);\n border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);\n @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));\n\n .btn-close {\n padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);\n margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;\n }\n}\n\n// Title text within header\n.modal-title {\n margin-bottom: 0;\n line-height: var(--#{$prefix}modal-title-line-height);\n}\n\n// Modal body\n// Where all modal content resides (sibling of .modal-header and .modal-footer)\n.modal-body {\n position: relative;\n // Enable `flex-grow: 1` so that the body take up as much space as possible\n // when there should be a fixed height on `.modal-dialog`.\n flex: 1 1 auto;\n padding: var(--#{$prefix}modal-padding);\n}\n\n// Footer (for actions)\n.modal-footer {\n display: flex;\n flex-shrink: 0;\n flex-wrap: wrap;\n align-items: center; // vertically center\n justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items\n padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);\n background-color: var(--#{$prefix}modal-footer-bg);\n border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);\n @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));\n\n // Place margin between footer elements\n // This solution is far from ideal because of the universal selector usage,\n // but is needed to fix https://github.com/twbs/bootstrap/issues/24800\n > * {\n margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class\n }\n}\n\n// Scale up the modal\n@include media-breakpoint-up(sm) {\n .modal {\n --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};\n --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};\n }\n\n // Automatically set modal's width for larger viewports\n .modal-dialog {\n max-width: var(--#{$prefix}modal-width);\n margin-right: auto;\n margin-left: auto;\n }\n\n .modal-sm {\n --#{$prefix}modal-width: #{$modal-sm};\n }\n}\n\n@include media-breakpoint-up(lg) {\n .modal-lg,\n .modal-xl {\n --#{$prefix}modal-width: #{$modal-lg};\n }\n}\n\n@include media-breakpoint-up(xl) {\n .modal-xl {\n --#{$prefix}modal-width: #{$modal-xl};\n }\n}\n\n// scss-docs-start modal-fullscreen-loop\n@each $breakpoint in map-keys($grid-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n $postfix: if($infix != \"\", $infix + \"-down\", \"\");\n\n @include media-breakpoint-down($breakpoint) {\n .modal-fullscreen#{$postfix} {\n width: 100vw;\n max-width: none;\n height: 100%;\n margin: 0;\n\n .modal-content {\n height: 100%;\n border: 0;\n @include border-radius(0);\n }\n\n .modal-header,\n .modal-footer {\n @include border-radius(0);\n }\n\n .modal-body {\n overflow-y: auto;\n }\n }\n }\n}\n// scss-docs-end modal-fullscreen-loop\n", "// Shared between modals and offcanvases\n@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {\n position: fixed;\n top: 0;\n left: 0;\n z-index: $zindex;\n width: 100vw;\n height: 100vh;\n background-color: $backdrop-bg;\n\n // Fade for backdrop\n &.fade { opacity: 0; }\n &.show { opacity: $backdrop-opacity; }\n}\n", "// Base class\n.tooltip {\n // scss-docs-start tooltip-css-vars\n --#{$prefix}tooltip-zindex: #{$zindex-tooltip};\n --#{$prefix}tooltip-max-width: #{$tooltip-max-width};\n --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};\n --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};\n --#{$prefix}tooltip-margin: #{$tooltip-margin};\n @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);\n --#{$prefix}tooltip-color: #{$tooltip-color};\n --#{$prefix}tooltip-bg: #{$tooltip-bg};\n --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};\n --#{$prefix}tooltip-opacity: #{$tooltip-opacity};\n --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};\n --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};\n // scss-docs-end tooltip-css-vars\n\n z-index: var(--#{$prefix}tooltip-zindex);\n display: block;\n margin: var(--#{$prefix}tooltip-margin);\n @include deprecate(\"`$tooltip-margin`\", \"v5\", \"v5.x\", true);\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n @include reset-text();\n @include font-size(var(--#{$prefix}tooltip-font-size));\n // Allow breaking very long words so they don't overflow the tooltip's bounds\n word-wrap: break-word;\n opacity: 0;\n\n &.show { opacity: var(--#{$prefix}tooltip-opacity); }\n\n .tooltip-arrow {\n display: block;\n width: var(--#{$prefix}tooltip-arrow-width);\n height: var(--#{$prefix}tooltip-arrow-height);\n\n &::before {\n position: absolute;\n content: \"\";\n border-color: transparent;\n border-style: solid;\n }\n }\n}\n\n.bs-tooltip-top .tooltip-arrow {\n bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n\n &::before {\n top: -1px;\n border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list\n border-top-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/* rtl:begin:ignore */\n.bs-tooltip-end .tooltip-arrow {\n left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}tooltip-arrow-height);\n height: var(--#{$prefix}tooltip-arrow-width);\n\n &::before {\n right: -1px;\n border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list\n border-right-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/* rtl:end:ignore */\n\n.bs-tooltip-bottom .tooltip-arrow {\n top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n\n &::before {\n bottom: -1px;\n border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list\n border-bottom-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/* rtl:begin:ignore */\n.bs-tooltip-start .tooltip-arrow {\n right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}tooltip-arrow-height);\n height: var(--#{$prefix}tooltip-arrow-width);\n\n &::before {\n left: -1px;\n border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list\n border-left-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/* rtl:end:ignore */\n\n.bs-tooltip-auto {\n &[data-popper-placement^=\"top\"] {\n @extend .bs-tooltip-top;\n }\n &[data-popper-placement^=\"right\"] {\n @extend .bs-tooltip-end;\n }\n &[data-popper-placement^=\"bottom\"] {\n @extend .bs-tooltip-bottom;\n }\n &[data-popper-placement^=\"left\"] {\n @extend .bs-tooltip-start;\n }\n}\n\n// Wrapper for the tooltip content\n.tooltip-inner {\n max-width: var(--#{$prefix}tooltip-max-width);\n padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);\n color: var(--#{$prefix}tooltip-color);\n text-align: center;\n background-color: var(--#{$prefix}tooltip-bg);\n @include border-radius(var(--#{$prefix}tooltip-border-radius));\n}\n", "@mixin reset-text {\n font-family: $font-family-base;\n // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.\n font-style: normal;\n font-weight: $font-weight-normal;\n line-height: $line-height-base;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n white-space: normal;\n word-spacing: normal;\n line-break: auto;\n}\n", ".popover {\n // scss-docs-start popover-css-vars\n --#{$prefix}popover-zindex: #{$zindex-popover};\n --#{$prefix}popover-max-width: #{$popover-max-width};\n @include rfs($popover-font-size, --#{$prefix}popover-font-size);\n --#{$prefix}popover-bg: #{$popover-bg};\n --#{$prefix}popover-border-width: #{$popover-border-width};\n --#{$prefix}popover-border-color: #{$popover-border-color};\n --#{$prefix}popover-border-radius: #{$popover-border-radius};\n --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};\n --#{$prefix}popover-box-shadow: #{$popover-box-shadow};\n --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};\n --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};\n @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);\n --#{$prefix}popover-header-color: #{$popover-header-color};\n --#{$prefix}popover-header-bg: #{$popover-header-bg};\n --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};\n --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};\n --#{$prefix}popover-body-color: #{$popover-body-color};\n --#{$prefix}popover-arrow-width: #{$popover-arrow-width};\n --#{$prefix}popover-arrow-height: #{$popover-arrow-height};\n --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);\n // scss-docs-end popover-css-vars\n\n z-index: var(--#{$prefix}popover-zindex);\n display: block;\n max-width: var(--#{$prefix}popover-max-width);\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n @include reset-text();\n @include font-size(var(--#{$prefix}popover-font-size));\n // Allow breaking very long words so they don't overflow the popover's bounds\n word-wrap: break-word;\n background-color: var(--#{$prefix}popover-bg);\n background-clip: padding-box;\n border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);\n @include border-radius(var(--#{$prefix}popover-border-radius));\n @include box-shadow(var(--#{$prefix}popover-box-shadow));\n\n .popover-arrow {\n display: block;\n width: var(--#{$prefix}popover-arrow-width);\n height: var(--#{$prefix}popover-arrow-height);\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n content: \"\";\n border-color: transparent;\n border-style: solid;\n border-width: 0;\n }\n }\n}\n\n.bs-popover-top {\n > .popover-arrow {\n bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list\n\n &::before,\n &::after {\n border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n bottom: 0;\n border-top-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n bottom: var(--#{$prefix}popover-border-width);\n border-top-color: var(--#{$prefix}popover-bg);\n }\n }\n}\n\n/* rtl:begin:ignore */\n.bs-popover-end {\n > .popover-arrow {\n left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}popover-arrow-height);\n height: var(--#{$prefix}popover-arrow-width);\n\n &::before,\n &::after {\n border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n left: 0;\n border-right-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n left: var(--#{$prefix}popover-border-width);\n border-right-color: var(--#{$prefix}popover-bg);\n }\n }\n}\n\n/* rtl:end:ignore */\n\n.bs-popover-bottom {\n > .popover-arrow {\n top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list\n\n &::before,\n &::after {\n border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n top: 0;\n border-bottom-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n top: var(--#{$prefix}popover-border-width);\n border-bottom-color: var(--#{$prefix}popover-bg);\n }\n }\n\n // This will remove the popover-header's border just below the arrow\n .popover-header::before {\n position: absolute;\n top: 0;\n left: 50%;\n display: block;\n width: var(--#{$prefix}popover-arrow-width);\n margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list\n content: \"\";\n border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);\n }\n}\n\n/* rtl:begin:ignore */\n.bs-popover-start {\n > .popover-arrow {\n right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}popover-arrow-height);\n height: var(--#{$prefix}popover-arrow-width);\n\n &::before,\n &::after {\n border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n right: 0;\n border-left-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n right: var(--#{$prefix}popover-border-width);\n border-left-color: var(--#{$prefix}popover-bg);\n }\n }\n}\n\n/* rtl:end:ignore */\n\n.bs-popover-auto {\n &[data-popper-placement^=\"top\"] {\n @extend .bs-popover-top;\n }\n &[data-popper-placement^=\"right\"] {\n @extend .bs-popover-end;\n }\n &[data-popper-placement^=\"bottom\"] {\n @extend .bs-popover-bottom;\n }\n &[data-popper-placement^=\"left\"] {\n @extend .bs-popover-start;\n }\n}\n\n// Offset the popover to account for the popover arrow\n.popover-header {\n padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);\n margin-bottom: 0; // Reset the default from Reboot\n @include font-size(var(--#{$prefix}popover-header-font-size));\n color: var(--#{$prefix}popover-header-color);\n background-color: var(--#{$prefix}popover-header-bg);\n border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);\n @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));\n\n &:empty {\n display: none;\n }\n}\n\n.popover-body {\n padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);\n color: var(--#{$prefix}popover-body-color);\n}\n", "// Notes on the classes:\n//\n// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)\n// even when their scroll action started on a carousel, but for compatibility (with Firefox)\n// we're preventing all actions instead\n// 2. The .carousel-item-start and .carousel-item-end is used to indicate where\n// the active slide is heading.\n// 3. .active.carousel-item is the current slide.\n// 4. .active.carousel-item-start and .active.carousel-item-end is the current\n// slide in its in-transition state. Only one of these occurs at a time.\n// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end\n// is the upcoming slide in transition.\n\n.carousel {\n position: relative;\n}\n\n.carousel.pointer-event {\n touch-action: pan-y;\n}\n\n.carousel-inner {\n position: relative;\n width: 100%;\n overflow: hidden;\n @include clearfix();\n}\n\n.carousel-item {\n position: relative;\n display: none;\n float: left;\n width: 100%;\n margin-right: -100%;\n backface-visibility: hidden;\n @include transition($carousel-transition);\n}\n\n.carousel-item.active,\n.carousel-item-next,\n.carousel-item-prev {\n display: block;\n}\n\n.carousel-item-next:not(.carousel-item-start),\n.active.carousel-item-end {\n transform: translateX(100%);\n}\n\n.carousel-item-prev:not(.carousel-item-end),\n.active.carousel-item-start {\n transform: translateX(-100%);\n}\n\n\n//\n// Alternate transitions\n//\n\n.carousel-fade {\n .carousel-item {\n opacity: 0;\n transition-property: opacity;\n transform: none;\n }\n\n .carousel-item.active,\n .carousel-item-next.carousel-item-start,\n .carousel-item-prev.carousel-item-end {\n z-index: 1;\n opacity: 1;\n }\n\n .active.carousel-item-start,\n .active.carousel-item-end {\n z-index: 0;\n opacity: 0;\n @include transition(opacity 0s $carousel-transition-duration);\n }\n}\n\n\n//\n// Left/right controls for nav\n//\n\n.carousel-control-prev,\n.carousel-control-next {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n // Use flex for alignment (1-3)\n display: flex; // 1. allow flex styles\n align-items: center; // 2. vertically center contents\n justify-content: center; // 3. horizontally center contents\n width: $carousel-control-width;\n padding: 0;\n color: $carousel-control-color;\n text-align: center;\n background: none;\n border: 0;\n opacity: $carousel-control-opacity;\n @include transition($carousel-control-transition);\n\n // Hover/focus state\n &:hover,\n &:focus {\n color: $carousel-control-color;\n text-decoration: none;\n outline: 0;\n opacity: $carousel-control-hover-opacity;\n }\n}\n.carousel-control-prev {\n left: 0;\n background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);\n}\n.carousel-control-next {\n right: 0;\n background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);\n}\n\n// Icons for within\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n display: inline-block;\n width: $carousel-control-icon-width;\n height: $carousel-control-icon-width;\n background-repeat: no-repeat;\n background-position: 50%;\n background-size: 100% 100%;\n}\n\n.carousel-control-prev-icon {\n background-image: escape-svg($carousel-control-prev-icon-bg) #{\"/*rtl:\" + escape-svg($carousel-control-next-icon-bg) + \"*/\"};\n}\n.carousel-control-next-icon {\n background-image: escape-svg($carousel-control-next-icon-bg) #{\"/*rtl:\" + escape-svg($carousel-control-prev-icon-bg) + \"*/\"};\n}\n\n// Optional indicator pips/controls\n//\n// Add a container (such as a list) with the following class and add an item (ideally a focusable control,\n// like a button) with data-bs-target for each slide your carousel holds.\n\n.carousel-indicators {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n padding: 0;\n // Use the .carousel-control's width as margin so we don't overlay those\n margin-right: $carousel-control-width;\n margin-bottom: 1rem;\n margin-left: $carousel-control-width;\n\n [data-bs-target] {\n box-sizing: content-box;\n flex: 0 1 auto;\n width: $carousel-indicator-width;\n height: $carousel-indicator-height;\n padding: 0;\n margin-right: $carousel-indicator-spacer;\n margin-left: $carousel-indicator-spacer;\n text-indent: -999px;\n cursor: pointer;\n background-color: $carousel-indicator-active-bg;\n background-clip: padding-box;\n border: 0;\n // Use transparent borders to increase the hit area by 10px on top and bottom.\n border-top: $carousel-indicator-hit-area-height solid transparent;\n border-bottom: $carousel-indicator-hit-area-height solid transparent;\n opacity: $carousel-indicator-opacity;\n @include transition($carousel-indicator-transition);\n }\n\n .active {\n opacity: $carousel-indicator-active-opacity;\n }\n}\n\n\n// Optional captions\n//\n//\n\n.carousel-caption {\n position: absolute;\n right: (100% - $carousel-caption-width) * .5;\n bottom: $carousel-caption-spacer;\n left: (100% - $carousel-caption-width) * .5;\n padding-top: $carousel-caption-padding-y;\n padding-bottom: $carousel-caption-padding-y;\n color: $carousel-caption-color;\n text-align: center;\n}\n\n// Dark mode carousel\n\n@mixin carousel-dark() {\n .carousel-control-prev-icon,\n .carousel-control-next-icon {\n filter: $carousel-dark-control-icon-filter;\n }\n\n .carousel-indicators [data-bs-target] {\n background-color: $carousel-dark-indicator-active-bg;\n }\n\n .carousel-caption {\n color: $carousel-dark-caption-color;\n }\n}\n\n.carousel-dark {\n @include carousel-dark();\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark) {\n @if $color-mode-type == \"media-query\" {\n .carousel {\n @include carousel-dark();\n }\n } @else {\n .carousel,\n &.carousel {\n @include carousel-dark();\n }\n }\n }\n}\n", "// scss-docs-start clearfix\n@mixin clearfix() {\n &::after {\n display: block;\n clear: both;\n content: \"\";\n }\n}\n// scss-docs-end clearfix\n", "//\n// Rotating border\n//\n\n.spinner-grow,\n.spinner-border {\n display: inline-block;\n width: var(--#{$prefix}spinner-width);\n height: var(--#{$prefix}spinner-height);\n vertical-align: var(--#{$prefix}spinner-vertical-align);\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 50%;\n animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);\n}\n\n// scss-docs-start spinner-border-keyframes\n@keyframes spinner-border {\n to { transform: rotate(360deg) #{\"/* rtl:ignore */\"}; }\n}\n// scss-docs-end spinner-border-keyframes\n\n.spinner-border {\n // scss-docs-start spinner-border-css-vars\n --#{$prefix}spinner-width: #{$spinner-width};\n --#{$prefix}spinner-height: #{$spinner-height};\n --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};\n --#{$prefix}spinner-border-width: #{$spinner-border-width};\n --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};\n --#{$prefix}spinner-animation-name: spinner-border;\n // scss-docs-end spinner-border-css-vars\n\n border: var(--#{$prefix}spinner-border-width) solid currentcolor;\n border-right-color: transparent;\n}\n\n.spinner-border-sm {\n // scss-docs-start spinner-border-sm-css-vars\n --#{$prefix}spinner-width: #{$spinner-width-sm};\n --#{$prefix}spinner-height: #{$spinner-height-sm};\n --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};\n // scss-docs-end spinner-border-sm-css-vars\n}\n\n//\n// Growing circle\n//\n\n// scss-docs-start spinner-grow-keyframes\n@keyframes spinner-grow {\n 0% {\n transform: scale(0);\n }\n 50% {\n opacity: 1;\n transform: none;\n }\n}\n// scss-docs-end spinner-grow-keyframes\n\n.spinner-grow {\n // scss-docs-start spinner-grow-css-vars\n --#{$prefix}spinner-width: #{$spinner-width};\n --#{$prefix}spinner-height: #{$spinner-height};\n --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};\n --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};\n --#{$prefix}spinner-animation-name: spinner-grow;\n // scss-docs-end spinner-grow-css-vars\n\n background-color: currentcolor;\n opacity: 0;\n}\n\n.spinner-grow-sm {\n --#{$prefix}spinner-width: #{$spinner-width-sm};\n --#{$prefix}spinner-height: #{$spinner-height-sm};\n}\n\n@if $enable-reduced-motion {\n @media (prefers-reduced-motion: reduce) {\n .spinner-border,\n .spinner-grow {\n --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};\n }\n }\n}\n", "// stylelint-disable function-disallowed-list\n\n%offcanvas-css-vars {\n // scss-docs-start offcanvas-css-vars\n --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};\n --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};\n --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};\n --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};\n --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};\n --#{$prefix}offcanvas-color: #{$offcanvas-color};\n --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};\n --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};\n --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};\n --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};\n --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};\n --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};\n // scss-docs-end offcanvas-css-vars\n}\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n $next: breakpoint-next($breakpoint, $grid-breakpoints);\n $infix: breakpoint-infix($next, $grid-breakpoints);\n\n .offcanvas#{$infix} {\n @extend %offcanvas-css-vars;\n }\n}\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n $next: breakpoint-next($breakpoint, $grid-breakpoints);\n $infix: breakpoint-infix($next, $grid-breakpoints);\n\n .offcanvas#{$infix} {\n @include media-breakpoint-down($next) {\n position: fixed;\n bottom: 0;\n z-index: var(--#{$prefix}offcanvas-zindex);\n display: flex;\n flex-direction: column;\n max-width: 100%;\n color: var(--#{$prefix}offcanvas-color);\n visibility: hidden;\n background-color: var(--#{$prefix}offcanvas-bg);\n background-clip: padding-box;\n outline: 0;\n @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));\n @include transition(var(--#{$prefix}offcanvas-transition));\n\n &.offcanvas-start {\n top: 0;\n left: 0;\n width: var(--#{$prefix}offcanvas-width);\n border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);\n transform: translateX(-100%);\n }\n\n &.offcanvas-end {\n top: 0;\n right: 0;\n width: var(--#{$prefix}offcanvas-width);\n border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);\n transform: translateX(100%);\n }\n\n &.offcanvas-top {\n top: 0;\n right: 0;\n left: 0;\n height: var(--#{$prefix}offcanvas-height);\n max-height: 100%;\n border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);\n transform: translateY(-100%);\n }\n\n &.offcanvas-bottom {\n right: 0;\n left: 0;\n height: var(--#{$prefix}offcanvas-height);\n max-height: 100%;\n border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);\n transform: translateY(100%);\n }\n\n &.showing,\n &.show:not(.hiding) {\n transform: none;\n }\n\n &.showing,\n &.hiding,\n &.show {\n visibility: visible;\n }\n }\n\n @if not ($infix == \"\") {\n @include media-breakpoint-up($next) {\n --#{$prefix}offcanvas-height: auto;\n --#{$prefix}offcanvas-border-width: 0;\n background-color: transparent !important; // stylelint-disable-line declaration-no-important\n\n .offcanvas-header {\n display: none;\n }\n\n .offcanvas-body {\n display: flex;\n flex-grow: 0;\n padding: 0;\n overflow-y: visible;\n // Reset `background-color` in case `.bg-*` classes are used in offcanvas\n background-color: transparent !important; // stylelint-disable-line declaration-no-important\n }\n }\n }\n }\n}\n\n.offcanvas-backdrop {\n @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);\n}\n\n.offcanvas-header {\n display: flex;\n align-items: center;\n padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);\n\n .btn-close {\n padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);\n margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;\n }\n}\n\n.offcanvas-title {\n margin-bottom: 0;\n line-height: var(--#{$prefix}offcanvas-title-line-height);\n}\n\n.offcanvas-body {\n flex-grow: 1;\n padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);\n overflow-y: auto;\n}\n", ".placeholder {\n display: inline-block;\n min-height: 1em;\n vertical-align: middle;\n cursor: wait;\n background-color: currentcolor;\n opacity: $placeholder-opacity-max;\n\n &.btn::before {\n display: inline-block;\n content: \"\";\n }\n}\n\n// Sizing\n.placeholder-xs {\n min-height: .6em;\n}\n\n.placeholder-sm {\n min-height: .8em;\n}\n\n.placeholder-lg {\n min-height: 1.2em;\n}\n\n// Animation\n.placeholder-glow {\n .placeholder {\n animation: placeholder-glow 2s ease-in-out infinite;\n }\n}\n\n@keyframes placeholder-glow {\n 50% {\n opacity: $placeholder-opacity-min;\n }\n}\n\n.placeholder-wave {\n mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);\n mask-size: 200% 100%;\n animation: placeholder-wave 2s linear infinite;\n}\n\n@keyframes placeholder-wave {\n 100% {\n mask-position: -200% 0%;\n }\n}\n", "// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251\n@each $color, $value in $theme-colors {\n .text-bg-#{$color} {\n color: color-contrast($value) if($enable-important-utilities, !important, null);\n background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);\n }\n}\n", "// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251\n@each $color, $value in $theme-colors {\n .link-#{$color} {\n color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);\n\n @if $link-shade-percentage != 0 {\n &:hover,\n &:focus {\n $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));\n color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);\n }\n }\n }\n}\n\n// One-off special link helper as a bridge until v6\n.link-body-emphasis {\n color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);\n\n @if $link-shade-percentage != 0 {\n &:hover,\n &:focus {\n color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);\n }\n }\n}\n", ".focus-ring:focus {\n outline: 0;\n // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values\n box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);\n}\n", ".icon-link {\n display: inline-flex;\n gap: $icon-link-gap;\n align-items: center;\n text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));\n text-underline-offset: $icon-link-underline-offset;\n backface-visibility: hidden;\n\n > .bi {\n flex-shrink: 0;\n width: $icon-link-icon-size;\n height: $icon-link-icon-size;\n fill: currentcolor;\n @include transition($icon-link-icon-transition);\n }\n}\n\n.icon-link-hover {\n &:hover,\n &:focus-visible {\n > .bi {\n transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);\n }\n }\n}\n", "// Credit: Nicolas Gallagher and SUIT CSS.\n\n.ratio {\n position: relative;\n width: 100%;\n\n &::before {\n display: block;\n padding-top: var(--#{$prefix}aspect-ratio);\n content: \"\";\n }\n\n > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n}\n\n@each $key, $ratio in $aspect-ratios {\n .ratio-#{$key} {\n --#{$prefix}aspect-ratio: #{$ratio};\n }\n}\n", "// Shorthand\n\n.fixed-top {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: $zindex-fixed;\n}\n\n.fixed-bottom {\n position: fixed;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: $zindex-fixed;\n}\n\n// Responsive sticky top and bottom\n@each $breakpoint in map-keys($grid-breakpoints) {\n @include media-breakpoint-up($breakpoint) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n .sticky#{$infix}-top {\n position: sticky;\n top: 0;\n z-index: $zindex-sticky;\n }\n\n .sticky#{$infix}-bottom {\n position: sticky;\n bottom: 0;\n z-index: $zindex-sticky;\n }\n }\n}\n", "// scss-docs-start stacks\n.hstack {\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n}\n\n.vstack {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n align-self: stretch;\n}\n// scss-docs-end stacks\n", "//\n// Visually hidden\n//\n\n.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n @include visually-hidden();\n}\n", "// stylelint-disable declaration-no-important\n\n// Hide content visually while keeping it accessible to assistive technologies\n//\n// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/\n\n@mixin visually-hidden() {\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n\n // Fix for positioned table caption that could become anonymous cells\n &:not(caption) {\n position: absolute !important;\n }\n}\n\n// Use to only display content when it's focused, or one of its child elements is focused\n// (i.e. when focus is within the element/container that the class was applied to)\n//\n// Useful for \"Skip to main content\" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n\n@mixin visually-hidden-focusable() {\n &:not(:focus):not(:focus-within) {\n @include visually-hidden();\n }\n}\n", "//\n// Stretched link\n//\n\n.stretched-link {\n &::#{$stretched-link-pseudo-element} {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: $stretched-link-z-index;\n content: \"\";\n }\n}\n", "//\n// Text truncation\n//\n\n.text-truncate {\n @include text-truncate();\n}\n", "// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n", ".vr {\n display: inline-block;\n align-self: stretch;\n width: $vr-border-width;\n min-height: 1em;\n background-color: currentcolor;\n opacity: $hr-opacity;\n}\n", "// Utility generator\n// Used to generate utilities & print utilities\n@mixin generate-utility($utility, $infix: \"\", $is-rfs-media-query: false) {\n $values: map-get($utility, values);\n\n // If the values are a list or string, convert it into a map\n @if type-of($values) == \"string\" or type-of(nth($values, 1)) != \"list\" {\n $values: zip($values, $values);\n }\n\n @each $key, $value in $values {\n $properties: map-get($utility, property);\n\n // Multiple properties are possible, for example with vertical or horizontal margins or paddings\n @if type-of($properties) == \"string\" {\n $properties: append((), $properties);\n }\n\n // Use custom class if present\n $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));\n $property-class: if($property-class == null, \"\", $property-class);\n\n // Use custom CSS variable name if present, otherwise default to `class`\n $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));\n\n // State params to generate pseudo-classes\n $state: if(map-has-key($utility, state), map-get($utility, state), ());\n\n $infix: if($property-class == \"\" and str-slice($infix, 1, 1) == \"-\", str-slice($infix, 2), $infix);\n\n // Don't prefix if value key is null (e.g. with shadow class)\n $property-class-modifier: if($key, if($property-class == \"\" and $infix == \"\", \"\", \"-\") + $key, \"\");\n\n @if map-get($utility, rfs) {\n // Inside the media query\n @if $is-rfs-media-query {\n $val: rfs-value($value);\n\n // Do not render anything if fluid and non fluid values are the same\n $value: if($val == rfs-fluid-value($value), null, $val);\n }\n @else {\n $value: rfs-fluid-value($value);\n }\n }\n\n $is-css-var: map-get($utility, css-var);\n $is-local-vars: map-get($utility, local-vars);\n $is-rtl: map-get($utility, rtl);\n\n @if $value != null {\n @if $is-rtl == false {\n /* rtl:begin:remove */\n }\n\n @if $is-css-var {\n .#{$property-class + $infix + $property-class-modifier} {\n --#{$prefix}#{$css-variable-name}: #{$value};\n }\n\n @each $pseudo in $state {\n .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {\n --#{$prefix}#{$css-variable-name}: #{$value};\n }\n }\n } @else {\n .#{$property-class + $infix + $property-class-modifier} {\n @each $property in $properties {\n @if $is-local-vars {\n @each $local-var, $variable in $is-local-vars {\n --#{$prefix}#{$local-var}: #{$variable};\n }\n }\n #{$property}: $value if($enable-important-utilities, !important, null);\n }\n }\n\n @each $pseudo in $state {\n .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {\n @each $property in $properties {\n @if $is-local-vars {\n @each $local-var, $variable in $is-local-vars {\n --#{$prefix}#{$local-var}: #{$variable};\n }\n }\n #{$property}: $value if($enable-important-utilities, !important, null);\n }\n }\n }\n }\n\n @if $is-rtl == false {\n /* rtl:end:remove */\n }\n }\n }\n}\n", "// Loop over each breakpoint\n@each $breakpoint in map-keys($grid-breakpoints) {\n\n // Generate media query if needed\n @include media-breakpoint-up($breakpoint) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n // Loop over each utility property\n @each $key, $utility in $utilities {\n // The utility can be disabled with `false`, thus check if the utility is a map first\n // Only proceed if responsive media queries are enabled or if it's the base media query\n @if type-of($utility) == \"map\" and (map-get($utility, responsive) or $infix == \"\") {\n @include generate-utility($utility, $infix);\n }\n }\n }\n}\n\n// RFS rescaling\n@media (min-width: $rfs-mq-value) {\n @each $breakpoint in map-keys($grid-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {\n // Loop over each utility property\n @each $key, $utility in $utilities {\n // The utility can be disabled with `false`, thus check if the utility is a map first\n // Only proceed if responsive media queries are enabled or if it's the base media query\n @if type-of($utility) == \"map\" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == \"\") {\n @include generate-utility($utility, $infix, true);\n }\n }\n }\n }\n}\n\n\n// Print utilities\n@media print {\n @each $key, $utility in $utilities {\n // The utility can be disabled with `false`, thus check if the utility is a map first\n // Then check if the utility needs print styles\n @if type-of($utility) == \"map\" and map-get($utility, print) == true {\n @include generate-utility($utility, \"-print\");\n }\n }\n}\n", "/**\n * Licensed to the .NET Foundation under one or more agreements.\n * The .NET Foundation licenses this file to you under the MIT license.\n */\n\n@use \"./hubspot/theme_variables.scss\" as theme;\n@use \"sass:meta\";\n@use \"highlight.js/scss/github\";\n\n// @use \"highlight.js/scss/vs\";\n\n.hljs {\n background-color: #f5f5f5;\n\n @media print {\n overflow-x: hidden;\n text-wrap: pretty;\n }\n}\n\n/* For code snippet line highlight */\npre > code .line-highlight {\n background-color: yellow;\n}\n\n.code-header {\n box-sizing: content-box;\n background-color: #f2f2f2;\n color: theme.$theme-typography-text-font-color;\n display: flex;\n flex-direction: row;\n border: 1px solid #e3e3e3;\n min-height: 30px;\n\n &>.language {\n padding: 7px 10px;\n flex-grow: 1;\n text-transform: uppercase;\n line-height: normal;\n vertical-align: middle;\n }\n\n &>.action {\n position: relative;\n padding: 2px 10px;\n background-color: transparent !important;\n border: 0 solid #e3e3e3;\n border-left-width: 1px;\n color: #171717;\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: normal;\n\n .successful-copy-alert.is-transparent {\n opacity: 0;\n transition: 500ms opacity ease-in-out;\n }\n\n .successful-copy-alert {\n justify-content: center;\n align-items: center;\n inset: 0;\n position: absolute;\n display: flex;\n background-color: theme.$theme-global_colors-secondary1-color;\n outline-color: #000;\n color: #000;\n }\n }\n}\n\n.hljs-keyword {\n color: #569cd6\n}\n\n.hljs-string {\n color: #d69d85;\n}\n\n.lang-dax.hljs.language-dax pre {\n background-color: #f7f7f7;\n color: #333;\n overflow-x: auto;\n}\n\n.lang-dax.hljs.language-dax .hljs-keyword {\n color: blue;\n}\n\n.lang-dax.hljs.language-dax .hljs-string {\n color: red;\n}\n\n.lang-dax.hljs.language-dax .hljs-variable {\n color: black;\n}\n\n.lang-dax.hljs.language-dax .hljs-comment {\n color: green;\n}\n\n.lang-dax.hljs.language-dax .hljs-built_in {\n color: purple;\n}\n\n.lang-dax.hljs.language-dax .hljs-literal {\n color: black;\n}\n", "pre code.hljs {\n display: block;\n overflow-x: auto;\n padding: 1em\n}\ncode.hljs {\n padding: 3px 5px\n}\n/*!\n Theme: GitHub\n Description: Light theme as seen on github.com\n Author: github.com\n Maintainer: @Hirse\n Updated: 2021-05-15\n\n Outdated base version: https://github.com/primer/github-syntax-light\n Current colors taken from GitHub's CSS\n*/\n.hljs {\n color: #24292e;\n background: #ffffff\n}\n.hljs-doctag,\n.hljs-keyword,\n.hljs-meta .hljs-keyword,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-type,\n.hljs-variable.language_ {\n /* prettylights-syntax-keyword */\n color: #d73a49\n}\n.hljs-title,\n.hljs-title.class_,\n.hljs-title.class_.inherited__,\n.hljs-title.function_ {\n /* prettylights-syntax-entity */\n color: #6f42c1\n}\n.hljs-attr,\n.hljs-attribute,\n.hljs-literal,\n.hljs-meta,\n.hljs-number,\n.hljs-operator,\n.hljs-variable,\n.hljs-selector-attr,\n.hljs-selector-class,\n.hljs-selector-id {\n /* prettylights-syntax-constant */\n color: #005cc5\n}\n.hljs-regexp,\n.hljs-string,\n.hljs-meta .hljs-string {\n /* prettylights-syntax-string */\n color: #032f62\n}\n.hljs-built_in,\n.hljs-symbol {\n /* prettylights-syntax-variable */\n color: #e36209\n}\n.hljs-comment,\n.hljs-code,\n.hljs-formula {\n /* prettylights-syntax-comment */\n color: #6a737d\n}\n.hljs-name,\n.hljs-quote,\n.hljs-selector-tag,\n.hljs-selector-pseudo {\n /* prettylights-syntax-entity-tag */\n color: #22863a\n}\n.hljs-subst {\n /* prettylights-syntax-storage-modifier-import */\n color: #24292e\n}\n.hljs-section {\n /* prettylights-syntax-markup-heading */\n color: #005cc5;\n font-weight: bold\n}\n.hljs-bullet {\n /* prettylights-syntax-markup-list */\n color: #735c0f\n}\n.hljs-emphasis {\n /* prettylights-syntax-markup-italic */\n color: #24292e;\n font-style: italic\n}\n.hljs-strong {\n /* prettylights-syntax-markup-bold */\n color: #24292e;\n font-weight: bold\n}\n.hljs-addition {\n /* prettylights-syntax-markup-inserted */\n color: #22863a;\n background-color: #f0fff4\n}\n.hljs-deletion {\n /* prettylights-syntax-markup-deleted */\n color: #b31d28;\n background-color: #ffeef0\n}\n.hljs-char.escape_,\n.hljs-link,\n.hljs-params,\n.hljs-property,\n.hljs-punctuation,\n.hljs-tag {\n /* purposely ignored */\n \n}", "/**\n * Licensed to the .NET Foundation under one or more agreements.\n * The .NET Foundation licenses this file to you under the MIT license.\n */\n\n@use \"bootstrap/scss/bootstrap\";\n\n$header-height: 130px;\n$footer-height: 863px;\n$main-padding-top: 0px;\n$main-padding-bottom: 2rem;\n\n:root {\n --ai-banner-height: 0px;\n}\n\n// Makes a div sticky to top\n@mixin sticky-top {\n @include bootstrap.media-breakpoint-up(md) {\n position: sticky;\n top: 0;\n z-index: 1030;\n }\n}\n\n@mixin stick-to-header {\n @include bootstrap.media-breakpoint-up(md) {\n position: sticky;\n top: calc($header-height + $main-padding-top + var(--ai-banner-height));\n }\n}\n\nhtml {\n width: calc(100vw - var(--scrollbar-width));\n min-height: 100vh;\n overflow-x: hidden;\n}\n\nbody,\nbody[data-layout=\"landing\"] {\n width: calc(100vw - var(--scrollbar-width));\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n\n /*\n >header {\n display: flex;\n align-items: stretch;\n\n @include sticky-top;\n\n @include bootstrap.media-breakpoint-up(md) {\n height: $header-height;\n }\n\n >nav {\n flex: 1;\n }\n }\n */\n\n /*\n >footer {\n font-size: 14px;\n padding: 1rem 0;\n height: $footer-height;\n\n >div {\n display: flex;\n align-items: center;\n }\n }\n */\n\n >main {\n display: flex;\n flex: 1;\n padding-top: $main-padding-top;\n padding-bottom: $main-padding-bottom;\n\n >.content {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n >:not(article, .docnav) {\n display: none;\n }\n\n >article {\n flex: 1;\n }\n\n @include bootstrap.media-breakpoint-up(md) {\n >article [id] {\n scroll-margin-top: $header-height;\n }\n }\n }\n\n >:not(.content) {\n display: none;\n }\n }\n\n @media print {\n >main {\n padding: 0 !important;\n }\n\n >header, >footer {\n display: none;\n }\n }\n}\n\n@media not print {\n // Search layout\n body[data-search] {\n >main {\n display: none;\n }\n\n >.search-results {\n display: block;\n flex: 1;\n padding-top: $main-padding-top;\n padding-bottom: $main-padding-bottom;\n }\n }\n\n body:not([data-search]) {\n >.search-results {\n display: none;\n }\n\n // Default layout: with header, footer, actionbar, affix, and toc\n &[data-layout=\"\"],\n &[data-layout=\"conceptual\"] {\n >main {\n padding-bottom: 0;\n\n >.toc-offcanvas {\n flex: .35;\n display: block;\n overflow: hidden;\n max-width: 360px;\n max-height: calc(100vh - $header-height - $main-padding-top - var(--ai-banner-height));\n\n @include stick-to-header;\n\n @include bootstrap.media-breakpoint-down(md) {\n flex: 0;\n }\n\n .offcanvas-start, .offcanvas-body {\n height: 100%;\n }\n }\n\n >.content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n margin: 0 3rem;\n padding-bottom: $main-padding-bottom;\n\n >.actionbar {\n display: flex;\n align-items: flex-start;\n margin-top: .5rem;\n\n >button {\n margin-top: -.65em;\n margin-left: -.8em\n }\n }\n\n article {\n flex: 1;\n }\n\n >.contribution,\n >.next-article {\n display: flex;\n }\n\n @include bootstrap.media-breakpoint-down(lg) {\n margin: 0 1rem;\n }\n\n @include bootstrap.media-breakpoint-down(md) {\n margin: 0;\n }\n }\n\n >.affix {\n display: block;\n width: 230px;\n max-height: calc(100vh - $header-height - $main-padding-top - var(--ai-banner-height));\n\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n overflow-x: hidden;\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n overflow-y: auto;\n\n @include stick-to-header;\n\n @media only screen and (max-width: 1140px) {\n display: none;\n }\n }\n }\n }\n\n // Chromeless layout: with no header, footer, actionbar, affix, and toc\n &[data-layout=\"chromeless\"] {\n >header, >footer {\n display: none;\n }\n }\n }\n}\n", "/**\n * Licensed to the .NET Foundation under one or more agreements.\n * The .NET Foundation licenses this file to you under the MIT license.\n */\n\n@use \"bootstrap/scss/bootstrap\";\n@use \"mixins\";\n\n.breadcrumb {\n font-size: 14px;\n\n a {\n @include mixins.underline-on-hover;\n }\n}\n\n.next-article {\n display: flex;\n\n &:not(:has(div)) {\n border-top-width: 0;\n }\n\n &:has(div) {\n margin-top: 3rem;\n padding-top: 1rem;\n }\n\n &>div {\n flex: 1;\n\n &.next {\n text-align: right;\n }\n\n &>span {\n opacity: .66;\n font-size: 14px;\n }\n\n &>a {\n display: block;\n }\n }\n}\n\n.navbar {\n padding: 0;\n\n .navbar-brand {\n display: flex;\n align-items: center;\n }\n\n .navbar-nav {\n display: flex;\n flex-wrap: nowrap;\n }\n\n #navbar {\n display: flex;\n flex: 1;\n justify-content: flex-start;\n\n li {\n margin-left: 24px;\n }\n\n li:first-child {\n margin-left: 0;\n }\n\n form {\n display: flex;\n position: relative;\n align-items: center;\n\n >i.bi {\n position: absolute;\n left: .8rem;\n opacity: .5;\n }\n\n >input {\n padding-left: 2.5rem;\n }\n\n &.search {\n order: 50;\n }\n\n &.icons {\n margin-left: auto;\n }\n }\n }\n\n @include bootstrap.media-breakpoint-down(md) {\n #navbar {\n /* flex-direction: column; */\n align-items: flex-start;\n\n form {\n margin: 1rem 0 0;\n\n &.search {\n align-self: stretch;\n order: 30;\n }\n\n &.icons {\n align-self: center;\n order: 40;\n margin: 1rem 0;\n }\n }\n }\n }\n}\n\n.affix {\n font-size: 14px;\n\n h5 {\n display: inline-block;\n font-weight: 300;\n text-transform: uppercase;\n padding: 1em 0 .5em;\n font-size: 14px;\n letter-spacing: 2px;\n }\n\n h6 {\n font-size: 14px;\n }\n\n ul {\n flex-direction: column;\n list-style-type: none;\n padding-left: 0;\n margin-left: 0;\n\n h6 {\n margin-top: 1rem;\n }\n\n li {\n margin: .4rem 0;\n\n a {\n @include mixins.underline-on-hover;\n }\n }\n }\n}\n\n.contribution {\n margin-top: 2rem;\n\n a.edit-link {\n @include mixins.underline-on-hover;\n\n &::before {\n content: \"\\F4CA\";\n display: inline-block;\n\n @include mixins.adjust-icon;\n }\n }\n}\n", "/**\n * Licensed to the .NET Foundation under one or more agreements.\n * The .NET Foundation licenses this file to you under the MIT license.\n */\n\n@use \"bootstrap/scss/bootstrap\";\n@use \"mixins\";\n\n$expand-stub-width: .85rem;\n\n.toc {\n min-width: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n\n ul {\n font-size: 14px;\n flex-direction: column;\n list-style-type: none;\n padding-left: 0;\n overflow-wrap: break-word;\n }\n\n li {\n font-weight: normal;\n margin: .6em 0;\n padding-left: $expand-stub-width;\n position: relative;\n }\n\n li > a {\n display: inline;\n\n @include mixins.underline-on-hover;\n }\n\n li > ul {\n display: none;\n }\n\n li.expanded > ul {\n display: block;\n }\n\n .expand-stub::before {\n display: inline-block;\n width: $expand-stub-width;\n cursor: pointer;\n font-family: bootstrap-icons;\n font-size: .8em;\n content: \"\\F285\";\n position: absolute;\n margin-top: .2em;\n margin-left: -$expand-stub-width;\n transition: transform 0.35s ease;\n transform-origin: .5em 50%;\n\n @media (prefers-reduced-motion) {\n & {\n transition: none;\n }\n }\n }\n\n li.expanded > .expand-stub::before {\n transform: rotate(90deg);\n }\n\n span.name-only {\n font-weight: 600;\n display: inline-block;\n margin: .4rem 0;\n }\n\n form.filter {\n display: flex;\n position: relative;\n align-items: center;\n margin-bottom: .5rem;\n\n >i.bi {\n position: absolute;\n left: .6rem;\n opacity: .5;\n }\n\n >input {\n padding-left: 2rem;\n }\n }\n\n >.no-result {\n font-size: .9em;\n color: bootstrap.$secondary;\n }\n \n a.pdf-link {\n @include mixins.underline-on-hover;\n\n &::before {\n content: \"\\F756\";\n display: inline-block;\n\n @include mixins.adjust-icon;\n }\n }\n}\n", "/**\n * Licensed to the .NET Foundation under one or more agreements.\n * The .NET Foundation licenses this file to you under the MIT license.\n */\n\n@use \"bootstrap/scss/bootstrap\";\n@use \"mixins\";\n\n/* External link icon */\na.external[href]::after {\n font-family: bootstrap-icons;\n content: \"\\F1C5\";\n font-size: .6rem;\n margin: 0 .2em;\n display: inline-block;\n}\n\n/* Blockquote */\nblockquote {\n border-style: solid;\n border-width: 0 0 0 3px;\n border-color: bootstrap.$secondary-border-subtle;\n margin: 1.2em 0 2em;\n padding: 0 .8em;\n display: block\n}\n\n@include bootstrap.color-mode(dark) {\n blockquote {\n border-color: bootstrap.$secondary-border-subtle-dark;\n }\n}\n\n/* Alerts */\n.alert {\n break-inside: avoid;\n}\n\n.alert h5 {\n text-transform: uppercase;\n font-weight: bold;\n font-size: 1rem;\n\n &::before {\n @include mixins.adjust-icon;\n }\n}\n\n.alert:not(:has(h5))>p:last-child {\n margin-block-end: 0;\n}\n\n.alert-info h5::before {\n content: \"\\F431\";\n}\n\n.alert-warning h5::before {\n content: \"\\F333\";\n}\n\n.alert-danger h5::before {\n content: \"\\F623\";\n}\n\n/* For Embedded Video */\ndiv.embeddedvideo {\n padding-top: 56.25%;\n position: relative;\n width: 100%;\n margin-bottom: 1em;\n}\n\ndiv.embeddedvideo iframe {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n}\n\n/* For code actions */\npre {\n position: relative;\n\n >.code-action {\n display: none;\n position: absolute;\n top: .25rem;\n right: .2rem;\n\n .bi-check-lg {\n font-size: 1.2rem;\n }\n }\n\n &:hover {\n >.code-action {\n display: block;\n }\n }\n}\n\n/* For tabbed content */\n.tabGroup {\n margin-bottom: 1rem;\n\n >section {\n margin: 0;\n padding: 1rem;\n border-top: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n}\n", "// Dark color mode variables\n//\n// Custom variables for the `[data-bs-theme=\"dark\"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.\n\n//\n// Global colors\n//\n\n// scss-docs-start sass-dark-mode-vars\n// scss-docs-start theme-text-dark-variables\n$primary-text-emphasis-dark: tint-color($primary, 40%) !default;\n$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;\n$success-text-emphasis-dark: tint-color($success, 40%) !default;\n$info-text-emphasis-dark: tint-color($info, 40%) !default;\n$warning-text-emphasis-dark: tint-color($warning, 40%) !default;\n$danger-text-emphasis-dark: tint-color($danger, 40%) !default;\n$light-text-emphasis-dark: $gray-100 !default;\n$dark-text-emphasis-dark: $gray-300 !default;\n// scss-docs-end theme-text-dark-variables\n\n// scss-docs-start theme-bg-subtle-dark-variables\n$primary-bg-subtle-dark: shade-color($primary, 80%) !default;\n$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;\n$success-bg-subtle-dark: shade-color($success, 80%) !default;\n$info-bg-subtle-dark: shade-color($info, 80%) !default;\n$warning-bg-subtle-dark: shade-color($warning, 80%) !default;\n$danger-bg-subtle-dark: shade-color($danger, 80%) !default;\n$light-bg-subtle-dark: $gray-800 !default;\n$dark-bg-subtle-dark: mix($gray-800, $black) !default;\n// scss-docs-end theme-bg-subtle-dark-variables\n\n// scss-docs-start theme-border-subtle-dark-variables\n$primary-border-subtle-dark: shade-color($primary, 40%) !default;\n$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;\n$success-border-subtle-dark: shade-color($success, 40%) !default;\n$info-border-subtle-dark: shade-color($info, 40%) !default;\n$warning-border-subtle-dark: shade-color($warning, 40%) !default;\n$danger-border-subtle-dark: shade-color($danger, 40%) !default;\n$light-border-subtle-dark: $gray-700 !default;\n$dark-border-subtle-dark: $gray-800 !default;\n// scss-docs-end theme-border-subtle-dark-variables\n\n$body-color-dark: $gray-300 !default;\n$body-bg-dark: $gray-900 !default;\n$body-secondary-color-dark: rgba($body-color-dark, .75) !default;\n$body-secondary-bg-dark: $gray-800 !default;\n$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;\n$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;\n$body-emphasis-color-dark: $white !default;\n$border-color-dark: $gray-700 !default;\n$border-color-translucent-dark: rgba($white, .15) !default;\n$headings-color-dark: inherit !default;\n$link-color-dark: tint-color($primary, 40%) !default;\n$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;\n$code-color-dark: tint-color($code-color, 40%) !default;\n$mark-color-dark: $body-color-dark !default;\n$mark-bg-dark: $yellow-800 !default;\n\n\n//\n// Forms\n//\n\n$form-select-indicator-color-dark: $body-color-dark !default;\n$form-select-indicator-dark: url(\"data:image/svg+xml,`-`` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n margin-top: 0; // 1\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-style: $headings-font-style;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n color: var(--#{$prefix}heading-color);\n}\n\nh1 {\n @extend %heading;\n @include font-size($h1-font-size);\n}\n\nh2 {\n @extend %heading;\n @include font-size($h2-font-size);\n}\n\nh3 {\n @extend %heading;\n @include font-size($h3-font-size);\n}\n\nh4 {\n @extend %heading;\n @include font-size($h4-font-size);\n}\n\nh5 {\n @extend %heading;\n @include font-size($h5-font-size);\n}\n\nh6 {\n @extend %heading;\n @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on ` `s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 2. Add explicit cursor to indicate changed behavior.\n// 3. Prevent the text-decoration to be skipped.\n\nabbr[title] {\n text-decoration: underline dotted; // 1\n cursor: help; // 2\n text-decoration-skip-ink: none; // 3\n}\n\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n color: var(--#{$prefix}highlight-color);\n background-color: var(--#{$prefix}highlight-bg);\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));\n text-decoration: $link-decoration;\n\n &:hover {\n --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: 1rem; // 2\n overflow: auto; // 3\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\ncode {\n @include font-size($code-font-size);\n color: var(--#{$prefix}code-color);\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n caption-side: bottom;\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-cell-padding-y;\n padding-bottom: $table-cell-padding-y;\n color: $table-caption-color;\n text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `