'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 justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends\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","//\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 justify-content: space-between;\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-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));\n margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));\n margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));\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","// 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","// 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","// Root CSS variables\n\n:root,\n[data-bs-theme=\"light\"] {\n\n --#{$prefix}user-selection-color: #{$user-selection-color};\n --#{$prefix}heading-color: #{$headings-color};\n --#{$prefix}heading-font-weight: #{$headings-font-weight};\n --#{$prefix}heading-link-color: #{$nav-link-color};\n --#{$prefix}heading-link-hover-color: #{$nav-link-hover-color};\n --#{$prefix}blockquote-color: #{$blockquote-color};\n --#{$prefix}blockquote-font-size: #{$blockquote-font-size};\n --#{$prefix}blockquote-footer-color: #{$blockquote-footer-color};\n --#{$prefix}blockquote-footer-font-size: #{$blockquote-footer-font-size};\n --#{$prefix}blockquote-mark-size: #{$blockquote-mark-size};\n --#{$prefix}blockquote-mark-color: #{$blockquote-mark-color};\n --#{$prefix}nav-link-color: #{$nav-link-color};\n --#{$prefix}link-color-rgb: var(--#{$prefix}primary-rgb);\n --#{$prefix}link-hover-color-rgb: var(--#{$prefix}primary-rgb);\n\n .text-dark {\n color: var(--#{$prefix}dark) !important; // stylelint-disable-line declaration-no-important\n }\n}\n\n\n// Dark theme overrides\n\n@if $enable-dark-mode {\n @include color-mode(dark, true) {\n\n // Grayscale\n --#{$prefix}gray-100: rgba(#{to-rgb($white)}, .03);\n --#{$prefix}gray-200: rgba(#{to-rgb($white)}, .06);\n --#{$prefix}gray-300: rgba(#{to-rgb($white)}, .13);\n --#{$prefix}gray-400: rgba(#{to-rgb($white)}, .25);\n --#{$prefix}gray-500: rgba(#{to-rgb($white)}, .4);\n --#{$prefix}gray-600: rgba(#{to-rgb($white)}, .5);\n --#{$prefix}gray-700: rgba(#{to-rgb($white)}, .7);\n --#{$prefix}gray-800: rgba(#{to-rgb($white)}, .9);\n --#{$prefix}gray-900: #{$white};\n\n // Link color\n --#{$prefix}link-color: var(--#{$prefix}primary);\n --#{$prefix}link-hover-color: var(--#{$prefix}primary);\n --#{$prefix}link-color-rgb: var(--#{$prefix}primary-rgb);\n --#{$prefix}link-hover-color-rgb: var(--#{$prefix}primary-rgb);\n\n // Box shadow\n --#{$prefix}box-shadow: #{$box-shadow-dark};\n --#{$prefix}box-shadow-sm: #{$box-shadow-sm-dark};\n --#{$prefix}box-shadow-lg: #{$box-shadow-lg-dark};\n }\n}\n","//\n// Reboot\n// --------------------------------------------------\n\nhtml * {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n// Sticky footer\nhtml,\nbody {\n height: 100%;\n}\nbody {\n display: flex;\n flex-direction: column;\n}\n.page-wrapper {\n flex: 1 0 auto;\n}\n.footer {\n flex-shrink: 0;\n}\n\n// Links\na {\n transition: $link-transition;\n &:focus { outline: none; }\n}\n\n// Background transition for links\n/* stylelint-disable selector-no-qualifying-type */\na[class^=\"bg-\"]:not(.btn),\na[class*=\"bg-\"]:not(.btn) {\n transition: background-color .25s ease;\n}\n/* stylelint-enable selector-no-qualifying-type */\n\n\n// Images\n// Responsive images (ensure images don\"t scale beyond their parents)\nimg,\nfigure {\n max-width: 100%;\n height: auto;\n vertical-align: middle;\n}\nsvg { max-width: 100%; }\n.dark-mode-img { display: none; }\n\n// Responsive iframes\niframe {\n width: 100%;\n}\n\n// Text Selection Color\n::selection {\n background: var(--#{$prefix}user-selection-color);\n}\n\nb,\nstrong {\n font-weight: $font-weight-bold;\n}\n\nsmall { font-weight: inherit; }\n\n// Disable button :focus outline\nbutton:focus {\n outline: none;\n}\n\n// Base font icons styles\n[class*=\" #{$icon-prefix}\"],\n[class^=\"#{$icon-prefix}\"] {\n display: inline-flex;\n line-height: 1;\n vertical-align: middle;\n}\n\n// Replace Bootstrap icons with Around icon font\n.bi-chevron-right::before,\n.bi-chevron-left::before {\n display: block;\n width: 1em;\n height: 1em;\n content: \"\";\n background-color: currentcolor;\n -webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix\n mask-size: cover;\n}\n.bi-chevron-right::before {\n -webkit-mask: escape-svg(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 `