UNPKG

@skem9/dselect

Version:

Dropdown select box for bootstrap 5 with search, multiple, tag and image support

github.com/Yohn/dselect

Yohn/dselect

1 lines • 118 kB
1
{"version":3,"sources":["../../source/css/dselect.scss","dselect.css","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../node_modules/bootstrap/scss/mixins/_transition.scss"],"names":[],"mappings":"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","file":"dselect.css","sourcesContent":["//!\n//! dselect.scss\n//! Yohn https://github.com/Yohn split to create a standalone file\n//! and have one file include all bootstrap 5 files\n//!\n@import \"../../node_modules/bootstrap/scss/functions\";\n// @import \"your-custom-variables\";\n@import \"../../node_modules/bootstrap/scss/variables\";\n@import \"../../node_modules/bootstrap/scss/mixins\";\n\n$dselect-clear-icon-width: .625rem;\n// Had to add this for the new 3.3.7 version of bootstrap\n$input-border-width: 1px;\n\n.dselect-wrapper {\n position: relative;\n\n // Toggler\n .form-select {\n padding-left: $form-select-padding-x;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: .25rem;\n text-align: left;\n background-color: var(--bs-body-bg, $body-bg);\n border: $input-border-width solid var(--bs-border-color, $input-border-color);\n min-height: calc(#{$form-select-line-height} * 1em + #{$form-select-padding-y * 2} + #{$input-border-width * 2});\n\n &.show {\n // ref: form-select:focus\n border-color: $form-select-focus-border-color;\n outline: 0;\n\n @if $enable-shadows {\n @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);\n }\n\n @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $form-select-focus-box-shadow;\n }\n }\n\n &.dselect-clearable {\n padding-right: add($form-select-indicator-padding + ($form-select-padding-x * .5), $dselect-clear-icon-width);\n }\n\n &.form-select-sm {\n padding-left: $form-select-padding-x-sm;\n min-height: calc(#{$form-select-line-height} * 1em + #{$form-select-padding-y-sm * 2} + #{$input-border-width * 2});\n\n &.dselect-clearable {\n padding-right: add($form-select-indicator-padding + ($form-select-padding-x-sm * .5), $dselect-clear-icon-width);\n }\n }\n\n &.form-select-lg {\n padding-left: $form-select-padding-x-lg;\n min-height: calc(#{$form-select-line-height} * 1em + #{$form-select-padding-y-lg * 2} + #{$input-border-width * 2});\n\n &.dselect-clearable {\n padding-right: add($form-select-indicator-padding + ($form-select-padding-x-lg * .5), $dselect-clear-icon-width);\n }\n }\n }\n\n // Menu - Fixed positioning and sizing\n .dropdown-menu {\n padding: $form-select-padding-x * .5;\n width: 100%;\n max-width: 100%;\n background-color: var(--bs-dropdown-bg, $dropdown-bg);\n border: $dropdown-border-width solid var(--bs-dropdown-border-color, $dropdown-border-color);\n @include border-radius($dropdown-border-radius);\n @include box-shadow($dropdown-box-shadow);\n position: absolute;\n top: 100%;\n left: 0;\n z-index: $zindex-dropdown;\n min-width: $dropdown-min-width;\n margin: $dropdown-spacer 0 0;\n color: var(--bs-dropdown-color, $dropdown-color);\n\n >.d-flex.flex-column {\n gap: $form-select-padding-x * .5;\n }\n }\n\n .form-select-sm+.dropdown-menu {\n padding: $form-select-padding-x-sm * .5;\n @include font-size($form-select-font-size-sm);\n }\n\n .form-select-lg+.dropdown-menu {\n padding: $form-select-padding-x-lg * .5;\n @include font-size($form-select-font-size-lg);\n }\n\n // Item\n .dropdown-item,\n .dropdown-header {\n padding: $dropdown-item-padding-y (\n $form-select-padding-x * .5\n );\n background-color: transparent;\n border: none;\n color: var(--bs-dropdown-link-color, $dropdown-link-color);\n text-decoration: none;\n white-space: nowrap;\n width: 100%;\n text-align: left;\n\n &:hover,\n &:focus {\n background-color: var(--bs-dropdown-link-hover-bg, $dropdown-link-hover-bg);\n color: var(--bs-dropdown-link-hover-color, $dropdown-link-hover-color);\n }\n\n &.active {\n background-color: var(--bs-dropdown-link-active-bg, $dropdown-link-active-bg);\n color: var(--bs-dropdown-link-active-color, $dropdown-link-active-color);\n }\n\n &.dselect-highlighted {\n background-color: var(--bs-dropdown-link-hover-bg, $dropdown-link-hover-bg);\n color: var(--bs-dropdown-link-hover-color, $dropdown-link-hover-color);\n outline: 2px solid var(--bs-primary, $primary);\n outline-offset: -2px;\n }\n\n &:disabled {\n color: var(--bs-dropdown-link-disabled-color, $dropdown-link-disabled-color);\n pointer-events: none;\n background-color: transparent;\n }\n}\n\n.form-select-sm+.dropdown-menu .dropdown-item,\n.form-select-sm+.dropdown-menu .dropdown-header {\n padding: subtract($dropdown-item-padding-y, 1px) ($form-select-padding-x-sm * .5);\n}\n\n.form-select-lg+.dropdown-menu .dropdown-item,\n.form-select-lg+.dropdown-menu .dropdown-header {\n padding: $dropdown-item-padding-y (\n $form-select-padding-x-lg * .5\n );\n}\n\n// Search input\n.form-control {\n @if $enable-rounded {\n border-radius: subtract($border-radius, $input-border-width);\n }\n\n @else {\n border-radius: 0 !important;\n }\n\n box-shadow: 0 0 $focus-ring-blur divide($focus-ring-width, 50) $focus-ring-color !important;\n border-color: var(--bs-border-color, $input-border-color) !important;\n background-color: var(--bs-body-bg, $input-bg);\n color: var(--bs-body-color, $input-color);\n padding: $dropdown-item-padding-y subtract($form-select-padding-x * .5, $input-border-width);\n font-size: inherit;\n\n &:focus {\n border-color: $input-focus-border-color;\n @include box-shadow($input-focus-box-shadow);\n }\n}\n\n.form-select-sm+.dropdown-menu .form-control {\n padding: subtract($dropdown-item-padding-y, 1px) subtract($form-select-padding-x-sm * .5, $input-border-width);\n}\n\n.form-select-lg+.dropdown-menu .form-control {\n padding: $dropdown-item-padding-y subtract($form-select-padding-x-lg * .5, $input-border-width);\n}\n\n// No results\n.dselect-no-results {\n padding: $dropdown-item-padding-y (\n $form-select-padding-x * .5\n );\ncolor: var(--bs-secondary-color, $text-muted);\nfont-style: italic;\ntext-align: center;\n}\n\n.form-select-sm+.dropdown-menu .dselect-no-results {\n padding: subtract($dropdown-item-padding-y, 1px) ($form-select-padding-x-sm * .5);\n}\n\n.form-select-lg+.dropdown-menu .dselect-no-results {\n padding: $dropdown-item-padding-y (\n $form-select-padding-x-lg * .5\n );\n}\n\n// Tag\n.dselect-tag {\n // Keep the ability to use text-bg-color classes for custom colors\n // Default fallback colors\n background-color: var(--bs-secondary, $secondary);\n color: var(--bs-white, $white);\n padding-left: add(.5rem, 14px);\n padding-right: .5rem;\n padding-top: .125rem;\n padding-bottom: .125rem;\n border-radius: $border-radius;\n height: calc(#{$form-select-line-height} * #{$font-size-base});\n line-height: calc((#{$form-select-line-height} * #{$font-size-base}) - 1px);\n position: relative;\n opacity: .8;\n display: inline-flex;\n align-items: center;\n font-size: $font-size-sm;\n @include transition(opacity .3s ease);\n\n &:hover {\n opacity: 1;\n }\n}\n\n.form-select-sm .dselect-tag {\n height: auto;\n line-height: inherit;\n font-size: multiply($font-size-sm, .85);\n padding-left: add(.375rem, 12px);\n padding-right: .375rem;\n}\n\n.form-select-lg .dselect-tag {\n height: calc(#{$form-select-line-height} * #{$font-size-lg});\n line-height: calc(#{$form-select-line-height} * #{$font-size-lg});\n font-size: $font-size-base;\n}\n\n.dselect-tag-remove {\n position: absolute;\n left: .25rem;\n top: 50%;\n margin-top: -7px;\n color: rgba($white, .35);\n cursor: pointer;\n @include transition(color .15s ease-in-out);\n\n &:hover {\n color: $white;\n }\n}\n\n// Placeholder\n.dselect-placeholder {\n color: var(--bs-secondary-color, $input-placeholder-color);\n font-style: italic;\n}\n\n// Optgroups\n.dropdown-header~.dropdown-item {\n padding-left: $form-select-padding-x;\n padding-right: $form-select-padding-x;\n}\n\n.form-select-sm+.dropdown-menu .dropdown-header {\n font-size: .85em;\n\n ~.dropdown-item {\n padding-left: $form-select-padding-x-sm;\n padding-right: $form-select-padding-x-sm;\n }\n}\n\n.form-select-lg+.dropdown-menu .dropdown-header {\n font-size: .85em;\n\n ~.dropdown-item {\n padding-left: $form-select-padding-x-lg;\n padding-right: $form-select-padding-x-lg;\n }\n}\n\n// Clear\n.dselect-clear {\n position: absolute;\n padding: 0;\n border: 0;\n box-shadow: none;\n background: transparent;\n top: 0;\n bottom: 0;\n right: $form-select-indicator-padding;\n display: flex;\n align-items: center;\n color: var(--bs-secondary-color, $text-muted);\n cursor: pointer;\n z-index: 3;\n\n &:hover {\n color: var(--bs-body-color, $body-color);\n }\n\n svg {\n width: $dselect-clear-icon-width;\n height: $dselect-clear-icon-width;\n }\n}\n\n[data-dselect-text=\"\"]~.dselect-clear {\n display: none;\n}\n\n// Validation\n.was-validated .form-select:invalid+& .form-select,\n.form-select.is-invalid+& .form-select {\n border-color: $form-feedback-invalid-color;\n\n &.show,\n &:focus {\n box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($form-feedback-invalid-color, $input-btn-focus-color-opacity);\n }\n}\n\n.was-validated .form-select:valid+& .form-select,\n.form-select.is-valid+& .form-select {\n border-color: $form-feedback-valid-color;\n\n &.show,\n &:focus {\n box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($form-feedback-valid-color, $input-btn-focus-color-opacity);\n }\n}\n\n// Focus states for keyboard navigation\n.dropdown-item:focus-visible,\n.dropdown-item:focus-within {\n color: var(--bs-dropdown-link-active-color, $dropdown-link-active-color);\n text-decoration: none;\n background-color: var(--bs-dropdown-link-active-bg, $dropdown-link-active-bg);\n outline: none !important;\n border-style: none !important;\n border-color: transparent !important;\n}\n\n// Scrollable items container\n.dselect-items {\n max-height: 360px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n}\n\n// Input group sizing compatibility\n.input-group-lg>.dselect-wrapper>.form-select {\n padding: $input-padding-y-lg $input-padding-x-lg;\n @include font-size($input-font-size-lg);\n @include border-radius($input-border-radius-lg);\n}\n\n.input-group-sm>.dselect-wrapper>.form-select {\n padding: $input-padding-y-sm $input-padding-x-sm;\n @include font-size($input-font-size-sm);\n @include border-radius($input-border-radius-sm);\n}\n\n.input-group-lg>.dselect-wrapper>.form-select,\n.input-group-sm>.dselect-wrapper>.form-select {\n padding-right: $form-select-padding-x + $form-select-indicator-padding;\n}\n\n// Input group integration\n.input-group {\n >.dselect-wrapper {\n position: relative; // For focus state's z-index\n flex: 1 1 auto;\n width: 1%;\n min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size\n\n &:focus {\n z-index: 5;\n }\n\n &:last-child>.form-select {\n @include border-start-radius(0);\n }\n\n &:nth-last-child(n + 3)>.form-select {\n @include border-end-radius(0);\n }\n }\n\n // First form-select followed by dselect-wrapper\n >.form-select:first-child+.dselect-wrapper:not(:last-child)>.form-select {\n @include border-end-radius(0);\n }\n\n &.has-validation {\n >.dselect-wrapper:nth-last-child(n + 4)>.form-select {\n @include border-end-radius(0);\n }\n\n >.dselect-wrapper:not(:nth-last-child(n+4))>.form-select {\n @include border-end-radius($border-radius);\n @include border-start-radius(0);\n }\n }\n}\n\n// Utility classes\n.dselect-wrapper .d-none {\n display: none !important;\n}\n\n/*\n.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),\n.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,\n.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select,\n.input-group.has-validation > :nth-last-child(n+3):not(.dselect-wrapper) + .form-selct\n\n\n.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),\n\n.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),\n\n.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,\n\n.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select\n\n*/",".dselect-wrapper {\n position: relative;\n}\n.dselect-wrapper .form-select {\n padding-left: 0.75rem;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.25rem;\n text-align: left;\n background-color: var(--bs-body-bg, #fff);\n border: 1px solid var(--bs-border-color, var(--bs-border-color));\n min-height: calc(1.5 * 1em + 0.75rem + 2px);\n}\n.dselect-wrapper .form-select.show {\n border-color: rgb(134, 182.5, 254);\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n}\n.dselect-wrapper .form-select.dselect-clearable {\n padding-right: 3.25rem;\n}\n.dselect-wrapper .form-select.form-select-sm {\n padding-left: 0.5rem;\n min-height: calc(1.5 * 1em + 0.5rem + 2px);\n}\n.dselect-wrapper .form-select.form-select-sm.dselect-clearable {\n padding-right: 3.125rem;\n}\n.dselect-wrapper .form-select.form-select-lg {\n padding-left: 1rem;\n min-height: calc(1.5 * 1em + 1rem + 2px);\n}\n.dselect-wrapper .form-select.form-select-lg.dselect-clearable {\n padding-right: 3.375rem;\n}\n.dselect-wrapper .dropdown-menu {\n padding: 0.375rem;\n width: 100%;\n max-width: 100%;\n background-color: var(--bs-dropdown-bg, var(--bs-body-bg));\n border: var(--bs-border-width) solid var(--bs-dropdown-border-color, var(--bs-border-color-translucent));\n border-radius: var(--bs-border-radius);\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n min-width: 10rem;\n margin: 0.125rem 0 0;\n color: var(--bs-dropdown-color, var(--bs-body-color));\n}\n.dselect-wrapper .dropdown-menu > .d-flex.flex-column {\n gap: 0.375rem;\n}\n.dselect-wrapper .form-select-sm + .dropdown-menu {\n padding: 0.25rem;\n font-size: 0.875rem;\n}\n.dselect-wrapper .form-select-lg + .dropdown-menu {\n padding: 0.5rem;\n font-size: 1.25rem;\n}\n.dselect-wrapper .dropdown-item,\n.dselect-wrapper .dropdown-header {\n padding: 0.25rem 0.375rem;\n background-color: transparent;\n border: none;\n color: var(--bs-dropdown-link-color, var(--bs-body-color));\n text-decoration: none;\n white-space: nowrap;\n width: 100%;\n text-align: left;\n}\n.dselect-wrapper .dropdown-item:hover, .dselect-wrapper .dropdown-item:focus,\n.dselect-wrapper .dropdown-header:hover,\n.dselect-wrapper .dropdown-header:focus {\n background-color: var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg));\n color: var(--bs-dropdown-link-hover-color, var(--bs-body-color));\n}\n.dselect-wrapper .dropdown-item.active,\n.dselect-wrapper .dropdown-header.active {\n background-color: var(--bs-dropdown-link-active-bg, #0d6efd);\n color: var(--bs-dropdown-link-active-color, #fff);\n}\n.dselect-wrapper .dropdown-item.dselect-highlighted,\n.dselect-wrapper .dropdown-header.dselect-highlighted {\n background-color: var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg));\n color: var(--bs-dropdown-link-hover-color, var(--bs-body-color));\n outline: 2px solid var(--bs-primary, #0d6efd);\n outline-offset: -2px;\n}\n.dselect-wrapper .dropdown-item:disabled,\n.dselect-wrapper .dropdown-header:disabled {\n color: var(--bs-dropdown-link-disabled-color, var(--bs-tertiary-color));\n pointer-events: none;\n background-color: transparent;\n}\n.dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-item,\n.dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-header {\n padding: calc(0.25rem - 1px) 0.25rem;\n}\n.dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-item,\n.dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-header {\n padding: 0.25rem 0.5rem;\n}\n.dselect-wrapper .form-control {\n border-radius: calc(0.375rem - 1px);\n box-shadow: 0 0 0 0.005rem rgba(13, 110, 253, 0.25) !important;\n border-color: var(--bs-border-color, var(--bs-border-color)) !important;\n background-color: var(--bs-body-bg, var(--bs-body-bg));\n color: var(--bs-body-color, var(--bs-body-color));\n padding: 0.25rem calc(0.375rem - 1px);\n font-size: inherit;\n}\n.dselect-wrapper .form-control:focus {\n border-color: rgb(134, 182.5, 254);\n}\n.dselect-wrapper .form-select-sm + .dropdown-menu .form-control {\n padding: calc(0.25rem - 1px) calc(0.25rem - 1px);\n}\n.dselect-wrapper .form-select-lg + .dropdown-menu .form-control {\n padding: 0.25rem calc(0.5rem - 1px);\n}\n.dselect-wrapper .dselect-no-results {\n padding: 0.25rem 0.375rem;\n color: var(--bs-secondary-color, var(--bs-secondary-color));\n font-style: italic;\n text-align: center;\n}\n.dselect-wrapper .form-select-sm + .dropdown-menu .dselect-no-results {\n padding: calc(0.25rem - 1px) 0.25rem;\n}\n.dselect-wrapper .form-select-lg + .dropdown-menu .dselect-no-results {\n padding: 0.25rem 0.5rem;\n}\n.dselect-wrapper .dselect-tag {\n background-color: var(--bs-secondary, #6c757d);\n color: var(--bs-white, #fff);\n padding-left: calc(0.5rem + 14px);\n padding-right: 0.5rem;\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n border-radius: 0.375rem;\n height: calc(1.5 * 1rem);\n line-height: calc(1.5 * 1rem - 1px);\n position: relative;\n opacity: 0.8;\n display: inline-flex;\n align-items: center;\n font-size: 0.875rem;\n transition: opacity 0.3s ease;\n}\n@media (prefers-reduced-motion: reduce) {\n .dselect-wrapper .dselect-tag {\n transition: none;\n }\n}\n.dselect-wrapper .dselect-tag:hover {\n opacity: 1;\n}\n.dselect-wrapper .form-select-sm .dselect-tag {\n height: auto;\n line-height: inherit;\n font-size: multiply(0.875rem, 0.85);\n padding-left: calc(0.375rem + 12px);\n padding-right: 0.375rem;\n}\n.dselect-wrapper .form-select-lg .dselect-tag {\n height: calc(1.5 * 1.25rem);\n line-height: calc(1.5 * 1.25rem);\n font-size: 1rem;\n}\n.dselect-wrapper .dselect-tag-remove {\n position: absolute;\n left: 0.25rem;\n top: 50%;\n margin-top: -7px;\n color: rgba(255, 255, 255, 0.35);\n cursor: pointer;\n transition: color 0.15s ease-in-out;\n}\n@media (prefers-reduced-motion: reduce) {\n .dselect-wrapper .dselect-tag-remove {\n transition: none;\n }\n}\n.dselect-wrapper .dselect-tag-remove:hover {\n color: #fff;\n}\n.dselect-wrapper .dselect-placeholder {\n color: var(--bs-secondary-color, var(--bs-secondary-color));\n font-style: italic;\n}\n.dselect-wrapper .dropdown-header ~ .dropdown-item {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-header {\n font-size: 0.85em;\n}\n.dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-header ~ .dropdown-item {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-header {\n font-size: 0.85em;\n}\n.dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-header ~ .dropdown-item {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.dselect-wrapper .dselect-clear {\n position: absolute;\n padding: 0;\n border: 0;\n box-shadow: none;\n background: transparent;\n top: 0;\n bottom: 0;\n right: 2.25rem;\n display: flex;\n align-items: center;\n color: var(--bs-secondary-color, var(--bs-secondary-color));\n cursor: pointer;\n z-index: 3;\n}\n.dselect-wrapper .dselect-clear:hover {\n color: var(--bs-body-color, #212529);\n}\n.dselect-wrapper .dselect-clear svg {\n width: 0.625rem;\n height: 0.625rem;\n}\n.dselect-wrapper [data-dselect-text=\"\"] ~ .dselect-clear {\n display: none;\n}\n.was-validated .form-select:invalid + .dselect-wrapper .form-select, .form-select.is-invalid + .dselect-wrapper .form-select {\n border-color: #dc3545;\n}\n.was-validated .form-select:invalid + .dselect-wrapper .form-select.show, .was-validated .form-select:invalid + .dselect-wrapper .form-select:focus, .form-select.is-invalid + .dselect-wrapper .form-select.show, .form-select.is-invalid + .dselect-wrapper .form-select:focus {\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);\n}\n.was-validated .form-select:valid + .dselect-wrapper .form-select, .form-select.is-valid + .dselect-wrapper .form-select {\n border-color: #198754;\n}\n.was-validated .form-select:valid + .dselect-wrapper .form-select.show, .was-validated .form-select:valid + .dselect-wrapper .form-select:focus, .form-select.is-valid + .dselect-wrapper .form-select.show, .form-select.is-valid + .dselect-wrapper .form-select:focus {\n box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);\n}\n.dselect-wrapper .dropdown-item:focus-visible,\n.dselect-wrapper .dropdown-item:focus-within {\n color: var(--bs-dropdown-link-active-color, #fff);\n text-decoration: none;\n background-color: var(--bs-dropdown-link-active-bg, #0d6efd);\n outline: none !important;\n border-style: none !important;\n border-color: transparent !important;\n}\n.dselect-wrapper .dselect-items {\n max-height: 360px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.input-group-lg > .dselect-wrapper > .form-select {\n padding: 0.5rem 1rem;\n font-size: 1.25rem;\n border-radius: var(--bs-border-radius-lg);\n}\n\n.input-group-sm > .dselect-wrapper > .form-select {\n padding: 0.25rem 0.5rem;\n font-size: 0.875rem;\n border-radius: var(--bs-border-radius-sm);\n}\n\n.input-group-lg > .dselect-wrapper > .form-select,\n.input-group-sm > .dselect-wrapper > .form-select {\n padding-right: 3rem;\n}\n\n.input-group > .dselect-wrapper {\n position: relative;\n flex: 1 1 auto;\n width: 1%;\n min-width: 0;\n}\n.input-group > .dselect-wrapper:focus {\n z-index: 5;\n}\n.input-group > .dselect-wrapper:last-child > .form-select {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.input-group > .dselect-wrapper:nth-last-child(n+3) > .form-select {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.input-group > .form-select:first-child + .dselect-wrapper:not(:last-child) > .form-select {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.input-group.has-validation > .dselect-wrapper:nth-last-child(n+4) > .form-select {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.input-group.has-validation > .dselect-wrapper:not(:nth-last-child(n+4)) > .form-select {\n border-top-right-radius: 0.375rem;\n border-bottom-right-radius: 0.375rem;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.dselect-wrapper .d-none {\n display: none !important;\n}\n\n/*\n.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),\n.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,\n.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select,\n.input-group.has-validation > :nth-last-child(n+3):not(.dselect-wrapper) + .form-selct\n\n\n.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),\n\n.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),\n\n.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,\n\n.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select\n\n*/\n\n/*# sourceMappingURL=dselect.css.map */\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n// scss-docs-start gray-color-variables\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n// scss-docs-end gray-color-variables\n\n// fusv-disable\n// scss-docs-start gray-colors-map\n$grays: (\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n) !default;\n// scss-docs-end gray-colors-map\n// fusv-enable\n\n// scss-docs-start color-variables\n$blue: #0d6efd !default;\n$indigo: #6610f2 !default;\n$purple: #6f42c1 !default;\n$pink: #d63384 !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #198754 !default;\n$teal: #20c997 !default;\n$cyan: #0dcaf0 !default;\n// scss-docs-end color-variables\n\n// scss-docs-start colors-map\n$colors: (\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"black\": $black,\n \"white\": $white,\n \"gray\": $gray-600,\n \"gray-dark\": $gray-800\n) !default;\n// scss-docs-end colors-map\n\n// The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.\n// See https://www.w3.org/TR/WCAG/#contrast-minimum\n$min-contrast-ratio: 4.5 !default;\n\n// Customize the light and dark text colors for use in our color contrast function.\n$color-contrast-dark: $black !default;\n$color-contrast-light: $white !default;\n\n// fusv-disable\n$blue-100: tint-color($blue, 80%) !default;\n$blue-200: tint-color($blue, 60%) !default;\n$blue-300: tint-color($blue, 40%) !default;\n$blue-400: tint-color($blue, 20%) !default;\n$blue-500: $blue !default;\n$blue-600: shade-color($blue, 20%) !default;\n$blue-700: shade-color($blue, 40%) !default;\n$blue-800: shade-color($blue, 60%) !default;\n$blue-900: shade-color($blue, 80%) !default;\n\n$indigo-100: tint-color($indigo, 80%) !default;\n$indigo-200: tint-color($indigo, 60%) !default;\n$indigo-300: tint-color($indigo, 40%) !default;\n$indigo-400: tint-color($indigo, 20%) !default;\n$indigo-500: $indigo !default;\n$indigo-600: shade-color($indigo, 20%) !default;\n$indigo-700: shade-color($indigo, 40%) !default;\n$indigo-800: shade-color($indigo, 60%) !default;\n$indigo-900: shade-color($indigo, 80%) !default;\n\n$purple-100: tint-color($purple, 80%) !default;\n$purple-200: tint-color($purple, 60%) !default;\n$purple-300: tint-color($purple, 40%) !default;\n$purple-400: tint-color($purple, 20%) !default;\n$purple-500: $purple !default;\n$purple-600: shade-color($purple, 20%) !default;\n$purple-700: shade-color($purple, 40%) !default;\n$purple-800: shade-color($purple, 60%) !default;\n$purple-900: shade-color($purple, 80%) !default;\n\n$pink-100: tint-color($pink, 80%) !default;\n$pink-200: tint-color($pink, 60%) !default;\n$pink-300: tint-color($pink, 40%) !default;\n$pink-400: tint-color($pink, 20%) !default;\n$pink-500: $pink !default;\n$pink-600: shade-color($pink, 20%) !default;\n$pink-700: shade-color($pink, 40%) !default;\n$pink-800: shade-color($pink, 60%) !default;\n$pink-900: shade-color($pink, 80%) !default;\n\n$red-100: tint-color($red, 80%) !default;\n$red-200: tint-color($red, 60%) !default;\n$red-300: tint-color($red, 40%) !default;\n$red-400: tint-color($red, 20%) !default;\n$red-500: $red !default;\n$red-600: shade-color($red, 20%) !default;\n$red-700: shade-color($red, 40%) !default;\n$red-800: shade-color($red, 60%) !default;\n$red-900: shade-color($red, 80%) !default;\n\n$orange-100: tint-color($orange, 80%) !default;\n$orange-200: tint-color($orange, 60%) !default;\n$orange-300: tint-color($orange, 40%) !default;\n$orange-400: tint-color($orange, 20%) !default;\n$orange-500: $orange !default;\n$orange-600: shade-color($orange, 20%) !default;\n$orange-700: shade-color($orange, 40%) !default;\n$orange-800: shade-color($orange, 60%) !default;\n$orange-900: shade-color($orange, 80%) !default;\n\n$yellow-100: tint-color($yellow, 80%) !default;\n$yellow-200: tint-color($yellow, 60%) !default;\n$yellow-300: tint-color($yellow, 40%) !default;\n$yellow-400: tint-color($yellow, 20%) !default;\n$yellow-500: $yellow !default;\n$yellow-600: shade-color($yellow, 20%) !default;\n$yellow-700: shade-color($yellow, 40%) !default;\n$yellow-800: shade-color($yellow, 60%) !default;\n$yellow-900: shade-color($yellow, 80%) !default;\n\n$green-100: tint-color($green, 80%) !default;\n$green-200: tint-color($green, 60%) !default;\n$green-300: tint-color($green, 40%) !default;\n$green-400: tint-color($green, 20%) !default;\n$green-500: $green !default;\n$green-600: shade-color($green, 20%) !default;\n$green-700: shade-color($green, 40%) !default;\n$green-800: shade-color($green, 60%) !default;\n$green-900: shade-color($green, 80%) !default;\n\n$teal-100: tint-color($teal, 80%) !default;\n$teal-200: tint-color($teal, 60%) !default;\n$teal-300: tint-color($teal, 40%) !default;\n$teal-400: tint-color($teal, 20%) !default;\n$teal-500: $teal !default;\n$teal-600: shade-color($teal, 20%) !default;\n$teal-700: shade-color($teal, 40%) !default;\n$teal-800: shade-color($teal, 60%) !default;\n$teal-900: shade-color($teal, 80%) !default;\n\n$cyan-100: tint-color($cyan, 80%) !default;\n$cyan-200: tint-color($cyan, 60%) !default;\n$cyan-300: tint-color($cyan, 40%) !default;\n$cyan-400: tint-color($cyan, 20%) !default;\n$cyan-500: $cyan !default;\n$cyan-600: shade-color($cyan, 20%) !default;\n$cyan-700: shade-color($cyan, 40%) !default;\n$cyan-800: shade-color($cyan, 60%) !default;\n$cyan-900: shade-color($cyan, 80%) !default;\n\n$blues: (\n \"blue-100\": $blue-100,\n \"blue-200\": $blue-200,\n \"blue-300\": $blue-300,\n \"blue-400\": $blue-400,\n \"blue-500\": $blue-500,\n \"blue-600\": $blue-600,\n \"blue-700\": $blue-700,\n \"blue-800\": $blue-800,\n \"blue-900\": $blue-900\n) !default;\n\n$indigos: (\n \"indigo-100\": $indigo-100,\n \"indigo-200\": $indigo-200,\n \"indigo-300\": $indigo-300,\n \"indigo-400\": $indigo-400,\n \"indigo-500\": $indigo-500,\n \"indigo-600\": $indigo-600,\n \"indigo-700\": $indigo-700,\n \"indigo-800\": $indigo-800,\n \"indigo-900\": $indigo-900\n) !default;\n\n$purples: (\n \"purple-100\": $purple-100,\n \"purple-200\": $purple-200,\n \"purple-300\": $purple-300,\n \"purple-400\": $purple-400,\n \"purple-500\": $purple-500,\n \"purple-600\": $purple-600,\n \"purple-700\": $purple-700,\n \"purple-800\": $purple-800,\n \"purple-900\": $purple-900\n) !default;\n\n$pinks: (\n \"pink-100\": $pink-100,\n \"pink-200\": $pink-200,\n \"pink-300\": $pink-300,\n \"pink-400\": $pink-400,\n \"pink-500\": $pink-500,\n \"pink-600\": $pink-600,\n \"pink-700\": $pink-700,\n \"pink-800\": $pink-800,\n \"pink-900\": $pink-900\n) !default;\n\n$reds: (\n \"red-100\": $red-100,\n \"red-200\": $red-200,\n \"red-300\": $red-300,\n \"red-400\": $red-400,\n \"red-500\": $red-500,\n \"red-600\": $red-600,\n \"red-700\": $red-700,\n \"red-800\": $red-800,\n \"red-900\": $red-900\n) !default;\n\n$oranges: (\n \"orange-100\": $orange-100,\n \"orange-200\": $orange-200,\n \"orange-300\": $orange-300,\n \"orange-400\": $orange-400,\n \"orange-500\": $orange-500,\n \"orange-600\": $orange-600,\n \"orange-700\": $orange-700,\n \"orange-800\": $orange-800,\n \"orange-900\": $orange-900\n) !default;\n\n$yellows: (\n \"yellow-100\": $yellow-100,\n \"yellow-200\": $yellow-200,\n \"yellow-300\": $yellow-300,\n \"yellow-400\": $yellow-400,\n \"yellow-500\": $yellow-500,\n \"yellow-600\": $yellow-600,\n \"yellow-700\": $yellow-700,\n \"yellow-800\": $yellow-800,\n \"yellow-900\": $yellow-900\n) !default;\n\n$greens: (\n \"green-100\": $green-100,\n \"green-200\": $green-200,\n \"green-300\": $green-300,\n \"green-400\": $green-400,\n \"green-500\": $green-500,\n \"green-600\": $green-600,\n \"green-700\": $green-700,\n \"green-800\": $green-800,\n \"green-900\": $green-900\n) !default;\n\n$teals: (\n \"teal-100\": $teal-100,\n \"teal-200\": $teal-200,\n \"teal-300\": $teal-300,\n \"teal-400\": $teal-400,\n \"teal-500\": $teal-500,\n \"teal-600\": $teal-600,\n \"teal-700\": $teal-700,\n \"teal-800\": $teal-800,\n \"teal-900\": $teal-900\n) !default;\n\n$cyans: (\n \"cyan-100\": $cyan-100,\n \"cyan-200\": $cyan-200,\n \"cyan-300\": $cyan-300,\n \"cyan-400\": $cyan-400,\n \"cyan-500\": $cyan-500,\n \"cyan-600\": $cyan-600,\n \"cyan-700\": $cyan-700,\n \"cyan-800\": $cyan-800,\n \"cyan-900\": $cyan-900\n) !default;\n// fusv-enable\n\n// scss-docs-start theme-color-variables\n$primary: $blue !default;\n$secondary: $gray-600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-100 !default;\n$dark: $gray-900 !default;\n// scss-docs-end theme-color-variables\n\n// scss-docs-start theme-colors-map\n$theme-colors: (\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"light\": $light,\n \"dark\": $dark\n) !default;\n// scss-docs-end theme-colors-map\n\n// scss-docs-start theme-text-variables\n$primary-text-emphasis: shade-color($primary, 60%) !default;\n$secondary-text-emphasis: shade-color($secondary, 60%) !default;\n$success-text-emphasis: shade-color($success, 60%) !default;\n$info-text-emphasis: shade-color($info, 60%) !default;\n$warning-text-emphasis: shade-color($warning, 60%) !default;\n$danger-text-emphasis: shade-color($danger, 60%) !default;\n$light-text-emphasis: $gray-700 !default;\n$dark-text-emphasis: $gray-700 !default;\n// scss-docs-end theme-text-variables\n\n// scss-docs-start theme-bg-subtle-variables\n$primary-bg-subtle: tint-color($primary, 80%) !default;\n$secondary-bg-subtle: tint-color($secondary, 80%) !default;\n$success-bg-subtle: tint-color($success, 80%) !default;\n$info-bg-subtle: tint-color($info, 80%) !default;\n$warning-bg-subtle: tint-color($warning, 80%) !default;\n$danger-bg-subtle: tint-color($danger, 80%) !default;\n$light-bg-subtle: mix($gray-100, $white) !default;\n$dark-bg-subtle: $gray-400 !default;\n// scss-docs-end theme-bg-subtle-variables\n\n// scss-docs-start theme-border-subtle-variables\n$primary-border-subtle: tint-color($primary, 60%) !default;\n$secondary-border-subtle: tint-color($secondary, 60%) !default;\n$success-border-subtle: tint-color($success, 60%) !default;\n$info-border-subtle: tint-color($info, 60%) !default;\n$warning-border-subtle: tint-color($warning, 60%) !default;\n$danger-border-subtle: tint-color($danger, 60%) !default;\n$light-border-subtle: $gray-200 !default;\n$dark-border-subtle: $gray-500 !default;\n// scss-docs-end theme-border-subtle-variables\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n (\"<\", \"%3c\"),\n (\">\", \"%3e\"),\n (\"#\", \"%23\"),\n (\"(\", \"%28\"),\n (\")\", \"%29\"),\n) !default;\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret: true !default;\n$enable-rounded: true !default;\n$enable-shadows: false !default;\n$enable-gradients: false !default;\n$enable-transitions: true !default;\n$enable-reduced-motion: true !default;\n$enable-smooth-scroll: true !default;\n$enable-grid-classes: true !default;\n$enable-container-classes: true !default;\n$enable-cssgrid: false !default;\n$enable-button-pointers: true !default;\n$enable-rfs: true !default;\n$enable-validation-icons: true !default;\n$enable-negative-margins: false !default;\n$enable-deprecation-messages: true !default;\n$enable-important-utilities: true !default;\n\n$enable-dark-mode: true !default;\n$color-mode-type: data !default; // `data` or `media-query`\n\n// Prefix for :root CSS variables\n\n$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`\n$prefix: $variable-prefix !default;\n\n// Gradient\n//\n// The gradient which is added to components if `$enable-gradients` is `true`\n// This gradient is also added to elements with `.bg-gradient`\n// scss-docs-start variable-gradient\n$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;\n// scss-docs-end variable-gradient\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n// scss-docs-start spacer-variables-maps\n$spacer: 1rem !default;\n$spacers: (\n 0: 0,\n 1: $spacer * .25,\n 2: $spacer * .5,\n 3: $spacer,\n 4: $spacer * 1.5,\n 5: $spacer * 3,\n) !default;\n// scss-docs-end spacer-variables-maps\n\n// Position\n//\n// Define the edge positioning anchors of the position utilities.\n\n// scss-docs-start position-map\n$position-values: (\n 0: 0,\n 50: 50%,\n 100: 100%\n) !default;\n// scss-docs-end position-map\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-text-align: null !default;\n$body-color: $gray-900 !default;\n$body-bg: $white !default;\n\n$body-secondary-color: rgba($body-color, .75) !default;\n$body-secondary-bg: $gray-200 !default;\n\n$body-tertiary-color: rgba($body-color, .5) !default;\n$body-tertiary-bg: $gray-100 !default;\n\n$body-emphasis-color: $black !default;\n\n// Links\n//\n// Style anchor elements.\n\n$link-color: $primary !default;\n$link-decoration: underline !default;\n$link-shade-percentage: 20% !default;\n$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;\n$link-hover-decoration: null !default;\n\n$stretched-link-pseudo-element: after !default;\n$stretched-link-z-index: 1 !default;\n\n// Icon links\n// scss-docs-start icon-link-variables\n$icon-link-gap: .375rem !default;\n$icon-link-underline-offset: .25em !default;\n$icon-link-icon-size: 1em !default;\n$icon-link-icon-transition: .2s ease-in-out transform !default;\n$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;\n// scss-docs-end icon-link-variables\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom: 1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n// scss-docs-start grid-breakpoints\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n xxl: 1400px\n) !default;\n// scss-docs-end grid-breakpoints\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n// scss-docs-start container-max-widths\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px,\n xxl: 1320px\n) !default;\n// scss-docs-end container-max-widths\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns: 12 !default;\n$grid-gutter-width: 1.5rem !default;\n$grid-row-columns: 6 !default;\n\n// Container padding\n\n$container-padding-x: $grid-gutter-width !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n// scss-docs-start border-variables\n$border-width: 1px !default;\n$border-widths: (\n 1: 1px,\n 2: 2px,\n 3: 3px,\n 4: 4px,\n 5: 5px\n) !default;\n$border-style: solid !default;\n$border-color: $gray-300 !default;\n$border-color-translucent: rgba($black, .175) !default;\n// scss-docs-end border-variables\n\n// scss-docs-start border-radius-variables\n$border-radius: .375rem !default;\n$border-radius-sm: .25rem !default;\n$border-radius-lg: .5rem !default;\n$border-radius-xl: 1rem !default;\n$border-radius-xxl: 2rem !default;\n$border-radius-pill: 50rem !default;\n// scss-docs-end border-radius-variables\n// fusv-disable\n$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0\n// fusv-enable\n\n// scss-docs-start box-shadow-variables\n$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;\n$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;\n// scss-docs-end box-shadow-variables\n\n$component-active-color: $white !default;\n$component-active-bg: $primary !default;\n\n// scss-docs-start focus-ring-variables\n$focus-ring-width: .25rem !default;\n$focus-ring-opacity: .25 !default;\n$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;\n$focus-ring-blur: 0 !default;\n$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;\n// scss-docs-end focus-ring-variables\n\n// scss-docs-start caret-variables\n$caret-width: .3em !default;\n$caret-vertical-align: $caret-width * .85 !default;\n$caret-spacing: $caret-width * .85 !default;\n// scss-docs-end caret-variables\n\n$transition-base: all .2s ease-in-out !default;\n$transition-fade: opacity .15s linear !default;\n// scss-docs-start collapse-transition\n$transition-collapse: height .35s ease !default;\n$transition-collapse-width: width .35s ease !default;\n// scss-docs-end collapse-transition\n\n// stylelint-disable function-disallowed-list\n// scss-docs-start aspect-ratios\n$aspect-ratios: (\n \"1x1\": 100%,\n \"4x3\": calc(3 / 4 * 100%),\n \"16x9\": calc(9 / 16 * 100%),\n \"21x9\": calc(9 / 21 * 100%)\n) !default;\n// scss-docs-end aspect-ratios\n// stylelint-enable function-disallowed-list\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// scss-docs-start font-variables\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n// stylelint-enable value-keyword-case\n$font-family-base: var(--#{$prefix}font-sans-serif) !default;\n$font-family-code: var(--#{$prefix}font-monospace) !default;\n\n// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins\n// $font-size-base affects the font size of the body text\n$font-size-root: null !default;\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\n$font-size-sm: $font-size-base * .875 !default;\n$font-size-lg: $font-size-base * 1.25 !default;\n\n$font-weight-lighter: lighter !default;\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-medium: 500 !default;\n$font-weight-semibold: 600 !default;\n$font-weight-bold: 700 !default;\n$font-weight-bolder: bolder !default;\n\n$font-weight-base: $font-weight-normal !default;\n\n$line-height-base: 1.5 !default;\n$line-height-sm: 1.25 !default;\n$line-height-lg: 2 !default;\n\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $font-size-base * 2 !default;\n$h3-font-size: $font-size-base * 1.75 !default;\n$h4-font-size: $font-size-base * 1.5 !default;\n$h5-font-size: $font-size-base * 1.25 !default;\n$h6-font-size: $font-size-base !default;\n// scss-docs-end font-variables\n\n// scss-docs-start font-sizes\n$font-sizes: (\n 1: $h1-font-size,\n 2: $h2-font-size,\n 3: $h3-font-size,\n 4: $h4-font-size,\n 5: $h5-font-size,\n 6: $h6-font-size\n) !default;\n// scss-docs-end font-sizes\n\n// scss-docs-start headings-variables\n$headings-margin-bottom: $spacer * .5 !default;\n$headings-font-family: null !default;\n$headings-font-style: null !default;\n$headings-font-weight: 500 !default;\n$headings-line-height: 1.2 !default;\n$headings-color: inherit !default;\n// scss-docs-end headings-variables\n\n// scss-docs-start display-headings\n$display-font-sizes: (\n 1: 5rem,\n 2: 4.5rem,\n 3: 4rem,\n 4: 3.5rem,\n 5: 3rem,\n 6: 2.5rem\n) !default;\n\n$display-font-family: null !default;\n$display-font-style: null !default;\n$display-font-weight: 300 !default;\n$display-line-height: $headings-line-height !default;\n// scss-docs-end display-headings\n\n// scss-docs-start type-variables\n$lead-font-size: $font-size-base * 1.25 !default;\n$lead-font-weight: 300 !default;\n\n$small-font-size: .875em !default;\n\n$sub-sup-font-size: .75em !default;\n\n// fusv-disable\n$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0\n// fusv-enable\n\n$initialism-font-size: $small-font-size !default;\n\n$blockquote-margin-y: $spacer !default;\n$blockquote-font-size: $font-size-base * 1.25 !default;\n$blockquote-footer-color: $gray-600 !default;\n$blockquote-footer-font-size: $small-font-size !default;\n\n$hr-margin-y: $spacer !default;\n$hr-color: inherit !default;\n\n// fusv-disable\n$hr-bg-color: null !default; // Deprecated in v5.2.0\n$hr-height: null !default; // Deprecated in v5.2.0\n// fusv-enable\n\n$hr-border-color: null !default; // Allows for inherited colors\n$hr-border-width: var(--#{$prefix}border-width) !default;\n$hr-opacity: .25 !default;\n\n// scss-docs-start vr-variables\n$vr-border-width: v