refactor: migrate to Sass modules

@@ -3,6 +3,7 @@ import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
 import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
+import './src/styles/search.scss'
 
 export const wrapRootElement = ({ element }: { element: ReactNode }) => {
 return <DefaultLayout>{element}</DefaultLayout>

@@ -3,6 +3,7 @@ import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
 import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
+import './src/styles/search.scss'
 
 export const wrapRootElement = ({ element }: { element: ReactNode }) => {
 return <DefaultLayout>{element}</DefaultLayout>

@@ -1,19 +1,18 @@
 // stylelint-disable declaration-no-important, selector-max-id
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
 
 //
 // Carbon ads
 //
 
-.carbonads-wrapper {
-min-height: 130px;
-margin: 2rem 0;
-}
-
 #carbonads {
 position: static;
 display: block;
 max-width: 400px;
 padding: 15px 15px 15px 160px;
+margin: 2rem 0;
 overflow: hidden;
 @include font-size(.8125rem);
 line-height: 1.4;

@@ -1,23 +1,24 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
 
 .anchor-link {
+padding: 0 .175rem;
 font-weight: 400;
 color: rgba($link-color, .5);
-padding-left: 0.375em;
 text-decoration: none;
 opacity: 0;
-@include transition(opacity 0.1s ease-in-out, color .15s ease-in-out);
+@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+&::after {
+content: "#";
+}
 
 &:focus,
-&:hover {
+&:hover,
+:hover > &,
+:target > & {
 color: $link-color;
 text-decoration: none;
+opacity: 1;
 }
 }
-
-h2, h3, h4, h5, h6, td {
-&:hover {
-.anchor-link {
-opacity: 1;
-}
-}
-}

@@ -1,3 +1,12 @@
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/clearfix" as *;
+@use "@coreui/coreui/scss/mixins/container" as *;
+@use "@coreui/coreui/scss/mixins/grid" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
 //
 // Docs examples
 //

@@ -1,3 +1,5 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+
 .component-sub-nav-wrapper {
 @include transition(box-shadow 0.2s linear);
 &:before {

@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 //
 // Footer
 //

@@ -1,6 +1,10 @@
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 .wrapper {
 width: 100%;
-@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+padding-inline-start: var(--cui-sidebar-occupy-start, 0);
 will-change: auto;
 @include transition(padding .15s);
 }

@@ -0,0 +1,19 @@
+@use "@coreui/coreui/scss/functions/to-rgb" as *;
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
+:root {
+--cd-purple: #{$cd-purple};
+--cd-violet: #{$cd-violet};
+--cd-accent: #{$cd-accent};
+--cd-violet-rgb: #{to-rgb($cd-violet)};
+--cd-accent-rgb: #{to-rgb($cd-accent)};
+--cd-pink-rgb: #{to-rgb($pink-500)};
+--cd-teal-rgb: #{to-rgb($teal-500)};
+--cd-violet-bg: var(--cd-violet);
+--cd-toc-color: var(--cd-violet);
+--cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
+--cd-callout-link: #{to-rgb($blue-600)};
+--cd-callout-code-color: #{$pink-600};
+--cd-pre-bg: var(--cui-tertiary-bg);
+}

@@ -1,3 +1,5 @@
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+
 .docs-sidebar {
 --cui-sidebar-bg: var(--cui-tertiary-bg);
 --cui-sidebar-brand-bg: transparent;
@@ -23,10 +25,8 @@
 }
 }
 
-@if $enable-dark-mode {
-@include color-mode(dark) {
-.docs-sidebar {
---cui-sidebar-bg: var(--cui-body-bg);
-}
+@include color-mode(dark) {
+.docs-sidebar {
+--cui-sidebar-bg: var(--cui-body-bg);
 }
 }

@@ -1,5 +1,10 @@
 // stylelint-disable selector-max-type
 
+@use "@coreui/coreui/scss/functions/math" as *;
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+
 .docs-toc {
 @include media-breakpoint-up(xl) {
 position: sticky;

@@ -1,5 +1,22 @@
-// stylelint-disable selector-class-pattern
+/*!
+* CoreUI Docs (https://coreui.io/bootstrap/docs/)
+* Copyright 2025 creativeLabs Łukasz Holeczek
+* Licensed under the Creative Commons Attribution 3.0 Unported License.
+* For details, see https://creativecommons.org/licenses/by/3.0/.
+*/
+
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/box-shadow" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
+@forward "@docsearch/css/dist/style";
+
 
+// stylelint-disable selector-class-pattern
 :root {
 --docsearch-primary-color: var(--cui-primary);
 --docsearch-logo-color: var(--cui-primary);
@@ -29,6 +46,7 @@
 --docsearch-muted-color: var(--cui-secondary-color);
 --docsearch-hit-shadow: none;
 
+position: fixed;
 z-index: 2000; // Make sure to be over all components showcased in the documentation
 cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://.com/algolia/docsearch/issues/1370 is tackled.
 
@@ -39,11 +57,7 @@
 
 .DocSearch-Button {
 --docsearch-searcx-background: #{rgba($black, .1)};
-// --docsearch-searcx-color: #{$white};
 --docsearch-searcx-focus-background: #{rgba($black, .25)};
-// --docsearch-searcx-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
-// --docsearch-text-color: #{$white};
-// --docsearch-muted-color: #{rgba($white, .65)};
 
 min-width: 200px;
 min-height: 38px;
@@ -58,7 +72,6 @@
 
 // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
 @include border-radius($btn-border-radius);
-
 @include box-shadow($input-box-shadow);
 @include transition($input-transition);