feat: optional parent selector

scss/_settings.scss

@@ -38,6 +38,11 @@ $enable-transitions: true !default;
 // Enable overriding with !important
 $enable-important: true !default;
 
+// Optional parent selector
+// If defined, all HTML tags are wrapped with this selector
+// :root is not wrapped
+$parent-selector: "" !default;
+
 // Breakpoints, viewports and root font size
 $breakpoints: () !default;
 $breakpoints: map.deep-merge(

scss/components/_accordion.scss

@@ -6,7 +6,7 @@
    * Accordion (<details>)
    */
 
-  details {
+  #{$parent-selector} details {
     display: block;
     margin-bottom: var(#{$css-var-prefix}spacing);
 
@@ -102,7 +102,7 @@
   }
 
   [dir="rtl"] {
-    details {
+    #{$parent-selector} details {
       summary {
         text-align: right;
 

scss/components/_card.scss

@@ -6,7 +6,7 @@
    * Card (<article>)
    */
 
-  article {
+  #{$parent-selector} article {
     margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
     padding: var(#{$css-var-prefix}block-spacing-vertical)
       var(#{$css-var-prefix}block-spacing-horizontal);

scss/components/_dropdown.scss

@@ -8,7 +8,7 @@
 
   // Container
   // ––––––––––––––––––––
-  details.dropdown {
+  #{$parent-selector} details.dropdown {
     position: relative;
     border-bottom: none;
 
@@ -38,7 +38,7 @@
   // Container type accordion
   // inside a nav
   // ––––––––––––––––––––
-  nav details.dropdown {
+  #{$parent-selector} nav details.dropdown {
     // Override height
     margin-bottom: 0;
   }
@@ -46,7 +46,7 @@
   // Bouton as a select
   // inside container type accordion
   // ––––––––––––––––––––
-  details.dropdown summary:not([role]) {
+  #{$parent-selector} details.dropdown summary:not([role]) {
     height: calc(
       1rem *
         var(#{$css-var-prefix}line-height) +
@@ -122,7 +122,7 @@
 
   // Dropdown inside a nav
   // ––––––––––––––––––––
-  nav details.dropdown {
+  #{$parent-selector} nav details.dropdown {
     display: inline;
     margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
 
@@ -146,7 +146,7 @@
 
   // Submenu
   // ––––––––––––––––––––
-  details.dropdown summary + ul {
+  #{$parent-selector} details.dropdown summary + ul {
     display: flex;
     z-index: 99;
     position: absolute;
@@ -226,14 +226,14 @@
   // Button opened
   // inside container type accordion
   // ––––––––––––––––––––
-  details.dropdown[open] summary {
+  #{$parent-selector} details.dropdown[open] summary {
     margin-bottom: 0;
   }
 
   // Menu opened
   // ––––––––––––––––––––
   // 1. Inside container type accordion
-  details.dropdown[open] summary {
+  #{$parent-selector} details.dropdown[open] summary {
     + ul {
       transform: scaleY(1);
       opacity: 1;
@@ -249,7 +249,7 @@
   // Close for dropdown
   // inside container type accordion
   // ––––––––––––––––––––
-  details.dropdown[open] summary {
+  #{$parent-selector} details.dropdown[open] summary {
     &::before {
       display: block;
       z-index: 1;
@@ -264,7 +264,7 @@
   }
   // Label
   // ––––––––––––––––––––
-  label > details.dropdown {
+  #{$parent-selector} label > details.dropdown {
     margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
   }
 }

scss/components/_group.scss

@@ -6,14 +6,14 @@
    * Group ([role="group"], [role="search"])
    */
 
-  form {
+  #{$parent-selector} form {
     &[role="search"],
     &[role="group"] {
       width: 100%;
     }
   }
 
-  [role="search"] {
+  #{$parent-selector} [role="search"] {
     > * {
       &:first-child {
         border-top-left-radius: 5rem;
@@ -27,8 +27,8 @@
     }
   }
 
-  [role="search"],
+  #{$parent-selector} [role="search"],
-  [role="group"] {
+  #{$parent-selector} [role="group"] {
     display: inline-flex;
     position: relative;
     margin-bottom: var(#{$css-var-prefix}spacing);

scss/components/_loading.scss

@@ -7,7 +7,7 @@
    */
 
   // Everything except form elements
-  [aria-busy="true"]:not(input, select, textarea, html) {
+  #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
     white-space: nowrap;
 
     &::before {
@@ -33,12 +33,12 @@
   }
 
   // Buttons and links
-  button,
+  #{$parent-selector} button,
-  [type="submit"],
+  #{$parent-selector} [type="submit"],
-  [type="button"],
+  #{$parent-selector} [type="button"],
-  [type="reset"],
+  #{$parent-selector} [type="reset"],
-  [role="button"],
+  #{$parent-selector} [role="button"],
-  a {
+  #{$parent-selector} a {
     &[aria-busy="true"] {
       pointer-events: none;
     }

scss/components/_modal.scss

@@ -10,7 +10,7 @@
     #{$css-var-prefix}scrollbar-width: 0px;
   }
 
-  dialog {
+  #{$parent-selector} dialog {
     display: flex;
     z-index: 999;
     position: fixed;

scss/components/_nav.scss

@@ -18,12 +18,12 @@
   // Pico
   // ––––––––––––––––––––
 
-  nav,
+  #{$parent-selector} nav,
-  nav ul {
+  #{$parent-selector} nav ul {
     display: flex;
   }
 
-  nav {
+  #{$parent-selector} nav {
     justify-content: space-between;
 
     ol,
@@ -118,7 +118,7 @@
   }
 
   // Vertical Nav
-  aside {
+  #{$parent-selector} aside {
     nav,
     ol,
     ul,
@@ -143,7 +143,7 @@
 
   // Breadcrumb RTL
   [dir="rtl"] {
-    nav {
+    #{$parent-selector} nav {
       &[aria-label="breadcrumb"] {
         & ul li {
           &:not(:last-child) {

scss/components/_progress.scss

@@ -13,7 +13,7 @@
 
   // 1. Add the correct display in Edge 18- and IE
   // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
-  progress {
+  #{$parent-selector} progress {
     display: inline-block; // 1
     vertical-align: baseline; // 2
   }
@@ -21,7 +21,7 @@
   // Pico
   // ––––––––––––––––––––
 
-  progress {
+  #{$parent-selector} progress {
     // Reset the default appearance
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -84,7 +84,7 @@
 
   [dir="rtl"] {
     @media (prefers-reduced-motion: no-preference) {
-      progress:indeterminate {
+      #{$parent-selector} progress:indeterminate {
         animation-direction: reverse;
       }
     }

scss/components/_tooltip.scss

@@ -6,7 +6,7 @@
    * Tooltip ([data-tooltip])
    */
 
-  [data-tooltip] {
+  #{$parent-selector} [data-tooltip] {
     position: relative;
 
     &:not(a, button, input) {

scss/content/_button.scss

@@ -14,7 +14,7 @@
   // 1. Change the font styles in all browsers
   // 2. Remove the margin on controls in Safari
   // 3. Show the overflow in Edge
-  button {
+  #{$parent-selector} button {
     margin: 0; // 2
     overflow: visible; // 3
     font-family: inherit; // 1
@@ -22,22 +22,22 @@
   }
 
   // Correct the inability to style buttons in iOS and Safari
-  button,
+  #{$parent-selector} button,
-  [type="submit"],
+  #{$parent-selector} [type="submit"],
-  [type="reset"],
+  #{$parent-selector} [type="reset"],
-  [type="button"] {
+  #{$parent-selector} [type="button"] {
     -webkit-appearance: button;
   }
 
   // Pico
   // ––––––––––––––––––––
 
-  button,
+  #{$parent-selector} button,
-  [type="submit"],
+  #{$parent-selector} [type="submit"],
-  [type="reset"],
+  #{$parent-selector} [type="reset"],
-  [type="button"],
+  #{$parent-selector} [type="button"],
-  [type="file"]::file-selector-button,
+  #{$parent-selector} [type="file"]::file-selector-button,
-  [role="button"] {
+  #{$parent-selector} [role="button"] {
     #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
     #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
     #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
@@ -85,18 +85,18 @@
     }
   }
 
-  [type="submit"],
+  #{$parent-selector} [type="submit"],
-  [type="reset"],
+  #{$parent-selector} [type="reset"],
-  [type="button"] {
+  #{$parent-selector} [type="button"] {
     margin-bottom: var(#{$css-var-prefix}spacing);
   }
 
   // .secondary, .contrast & .outline
   @if $enable-classes {
     // Secondary
-    :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
-    [type="reset"],
+    #{$parent-selector} [type="reset"],
-    [type="file"]::file-selector-button {
+    #{$parent-selector} [type="file"]::file-selector-button {
       #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
       #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
@@ -117,7 +117,7 @@
     }
 
     // Contrast
-    :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
       #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
       #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
@@ -137,7 +137,7 @@
     }
 
     // Outline (primary)
-    :is(button, [type="submit"], [type="button"], [role="button"]).outline,
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
     [type="reset"].outline {
       #{$css-var-prefix}background-color: transparent;
       #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
@@ -151,7 +151,8 @@
     }
 
     // Outline (secondary)
-    :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
     [type="reset"].outline {
       #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
@@ -163,7 +164,8 @@
     }
 
     // Outline (contrast)
-    :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
       #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
 
@@ -174,8 +176,8 @@
     }
   } @else {
     // Secondary button without .class
-    [type="reset"],
+    #{$parent-selector} [type="reset"],
-    [type="file"]::file-selector-button {
+    #{$parent-selector} [type="file"]::file-selector-button {
       #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
       #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
@@ -196,8 +198,10 @@
   }
 
   // Button [disabled]
-  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
+  #{$parent-selector}
-  :where(fieldset[disabled])
+    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
+  #{$parent-selector}
+    :where(fieldset[disabled])
     :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
     opacity: 0.5;
     pointer-events: none;

scss/content/_code.scss

@@ -13,21 +13,21 @@
 
   // 1. Correct the inheritance and scaling of font size in all browsers
   // 2. Correct the odd `em` font sizing in all browsers
-  pre,
+  #{$parent-selector} pre,
-  code,
+  #{$parent-selector} code,
-  kbd,
+  #{$parent-selector} kbd,
-  samp {
+  #{$parent-selector} samp {
     font-size: 0.875em; // 2
     font-family: var(#{$css-var-prefix}font-family); // 1
   }
 
-  pre code {
+  #{$parent-selector} pre code {
     font-size: inherit;
     font-family: inherit;
   }
 
   // Prevent overflow of the container in all browsers (opinionated)
-  pre {
+  #{$parent-selector} pre {
     -ms-overflow-style: scrollbar;
     overflow: auto;
   }
@@ -35,9 +35,9 @@
   // Pico
   // ––––––––––––––––––––
 
-  pre,
+  #{$parent-selector} pre,
-  code,
+  #{$parent-selector} code,
-  kbd {
+  #{$parent-selector} kbd {
     border-radius: var(#{$css-var-prefix}border-radius);
     background: var(#{$css-var-prefix}code-background-color);
     color: var(#{$css-var-prefix}code-color);
@@ -45,13 +45,13 @@
     line-height: initial;
   }
 
-  code,
+  #{$parent-selector} code,
-  kbd {
+  #{$parent-selector} kbd {
     display: inline-block;
     padding: 0.375rem;
   }
 
-  pre {
+  #{$parent-selector} pre {
     display: block;
     margin-bottom: var(#{$css-var-prefix}spacing);
     overflow-x: auto;
@@ -65,7 +65,7 @@
   }
 
   // kbd
-  kbd {
+  #{$parent-selector} kbd {
     background-color: var(#{$css-var-prefix}code-kbd-background-color);
     color: var(#{$css-var-prefix}code-kbd-color);
     vertical-align: baseline;

scss/content/_embedded.scss

@@ -12,42 +12,42 @@
   // ––––––––––––––––––––
 
   // Change the alignment on media elements in all browsers (opinionated)
-  :where(audio, canvas, iframe, img, svg, video) {
+  #{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
     vertical-align: middle;
   }
 
   // Add the correct display in IE 9-
-  audio,
+  #{$parent-selector} audio,
-  video {
+  #{$parent-selector} video {
     display: inline-block;
   }
 
   // Add the correct display in iOS 4-7
-  audio:not([controls]) {
+  #{$parent-selector} audio:not([controls]) {
     display: none;
     height: 0;
   }
 
   // Remove the border on iframes in all browsers (opinionated)
-  :where(iframe) {
+  #{$parent-selector} :where(iframe) {
     border-style: none;
   }
 
   // 1. Remove the border on images inside links in IE 10.
   // 2. Responsive by default
-  img {
+  #{$parent-selector} img {
     max-width: 100%; // 2
     height: auto; // 2
     border-style: none; // 1
   }
 
   // Change the fill color to match the text color in all browsers (opinionated)
-  :where(svg:not([fill])) {
+  #{$parent-selector} :where(svg:not([fill])) {
     fill: currentColor;
   }
 
   // Hide the overflow in IE
-  svg:not(:root) {
+  #{$parent-selector} svg:not(:root) {
     overflow: hidden;
   }
 }

scss/content/_link.scss

@@ -6,8 +6,8 @@
    * Link
    */
 
-  :where(a:not([role="button"])),
+  #{$parent-selector} :where(a:not([role="button"])),
-  [role="link"] {
+  #{$parent-selector} [role="link"] {
     #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
     #{$css-var-prefix}background-color: transparent;
     #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
@@ -61,7 +61,7 @@
     }
   }
 
-  a {
+  #{$parent-selector} a {
     &[role="button"] {
       display: inline-block;
     }

scss/content/_miscs.scss

@@ -13,7 +13,7 @@
 
   // 1. Correct the inheritance of border color in Firefox
   // 2. Add the correct box sizing in Firefox
-  hr {
+  #{$parent-selector} hr {
     height: 0; // 2
     margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
     border: 0;
@@ -22,8 +22,8 @@
   }
 
   // Add the correct display in IE 10+
-  [hidden],
+  #{$parent-selector} [hidden],
-  template {
+  #{$parent-selector} template {
     @if $enable-important {
       display: none !important;
     } @else {
@@ -32,7 +32,7 @@
   }
 
   // Add the correct display in IE 9-
-  canvas {
+  #{$parent-selector} canvas {
     display: inline-block;
   }
 }

scss/content/_table.scss

@@ -13,7 +13,7 @@
 
   // 1. Collapse border spacing in all browsers (opinionated)
   // 2. Remove text indentation from table contents in Chrome, Edge, and Safari
-  :where(table) {
+  #{$parent-selector} :where(table) {
     width: 100%;
     border-collapse: collapse; // 1
     border-spacing: 0;
@@ -24,8 +24,8 @@
   // ––––––––––––––––––––
 
   // Cells
-  th,
+  #{$parent-selector} th,
-  td {
+  #{$parent-selector} td {
     padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
     border-bottom: var(#{$css-var-prefix}border-width)
       solid
@@ -38,7 +38,7 @@
   }
 
   // Footer
-  tfoot {
+  #{$parent-selector} tfoot {
     th,
     td {
       border-top: var(#{$css-var-prefix}border-width)
@@ -50,7 +50,7 @@
 
   // Striped
   @if enable-classes {
-    table {
+    #{$parent-selector} table {
       &.striped {
         tbody tr:nth-child(odd) th,
         tbody tr:nth-child(odd) td {

scss/content/_typography.scss

@@ -12,37 +12,37 @@
   // ––––––––––––––––––––
 
   // Add the correct font weight in Chrome, Edge, and Safari
-  b,
+  #{$parent-selector} b,
-  strong {
+  #{$parent-selector} strong {
     font-weight: bolder;
   }
 
   // Prevent `sub` and `sup` elements from affecting the line height in all browsers
-  sub,
+  #{$parent-selector} sub,
-  sup {
+  #{$parent-selector} sup {
     position: relative;
     font-size: 0.75em;
     line-height: 0;
     vertical-align: baseline;
   }
-  sub {
+  #{$parent-selector} sub {
     bottom: -0.25em;
   }
-  sup {
+  #{$parent-selector} sup {
     top: -0.5em;
   }
 
   // Pico
   // ––––––––––––––––––––
 
-  address,
+  #{$parent-selector} address,
-  blockquote,
+  #{$parent-selector} blockquote,
-  dl,
+  #{$parent-selector} dl,
-  ol,
+  #{$parent-selector} ol,
-  p,
+  #{$parent-selector} p,
-  pre,
+  #{$parent-selector} pre,
-  table,
+  #{$parent-selector} table,
-  ul {
+  #{$parent-selector} ul {
     margin-top: 0;
     margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
     color: var(#{$css-var-prefix}color);
@@ -51,12 +51,12 @@
   }
 
   // Headings
-  h1,
+  #{$parent-selector} h1,
-  h2,
+  #{$parent-selector} h2,
-  h3,
+  #{$parent-selector} h3,
-  h4,
+  #{$parent-selector} h4,
-  h5,
+  #{$parent-selector} h5,
-  h6 {
+  #{$parent-selector} h6 {
     margin-top: 0;
     margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
     color: var(#{$css-var-prefix}color);
@@ -66,39 +66,40 @@
     font-family: var(#{$css-var-prefix}font-family);
   }
 
-  h1 {
+  #{$parent-selector} h1 {
     #{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
   }
-  h2 {
+  #{$parent-selector} h2 {
     #{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
   }
-  h3 {
+  #{$parent-selector} h3 {
     #{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
   }
-  h4 {
+  #{$parent-selector} h4 {
     #{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
   }
-  h5 {
+  #{$parent-selector} h5 {
     #{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
   }
-  h6 {
+  #{$parent-selector} h6 {
     #{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
   }
 
   // Margin-top for headings after a block
-  :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
+  #{$parent-selector}
+    :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
     ~ :is(h1, h2, h3, h4, h5, h6) {
       margin-top: var(#{$css-var-prefix}typography-spacing-top);
     }
   }
 
   // Paragraphs
-  p {
+  #{$parent-selector} p {
     margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
   }
 
   // Heading group
-  hgroup {
+  #{$parent-selector} hgroup {
     margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
 
     > * {
@@ -114,7 +115,7 @@
   }
 
   // Lists
-  :where(ol, ul) {
+  #{$parent-selector} :where(ol, ul) {
     li {
       margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
     }
@@ -122,17 +123,17 @@
 
   // Margin-top for nested lists
   // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
-  :where(dl, ol, ul) :where(dl, ol, ul) {
+  #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
     margin: 0; // 1
     margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
   }
 
-  ul li {
+  #{$parent-selector} ul li {
     list-style: square;
   }
 
   // Highlighted text
-  mark {
+  #{$parent-selector} mark {
     padding: 0.125rem 0.25rem;
     background-color: var(#{$css-var-prefix}mark-background-color);
     color: var(#{$css-var-prefix}mark-color);
@@ -140,7 +141,7 @@
   }
 
   // Blockquote
-  blockquote {
+  #{$parent-selector} blockquote {
     display: block;
     margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
     padding: var(#{$css-var-prefix}spacing);
@@ -157,25 +158,25 @@
 
   // Abbreviations
   // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
-  abbr[title] {
+  #{$parent-selector} abbr[title] {
     border-bottom: 1px dotted;
     text-decoration: none; // 1
     cursor: help;
   }
 
   // Ins
-  ins {
+  #{$parent-selector} ins {
     color: var(#{$css-var-prefix}ins-color);
     text-decoration: none;
   }
 
   // del
-  del {
+  #{$parent-selector} del {
     color: var(#{$css-var-prefix}del-color);
   }
 
   // selection
-  ::selection {
+  #{$parent-selector} ::selection {
     background-color: var(#{$css-var-prefix}text-selection-color);
   }
 }

scss/forms/_basics.scss

@@ -15,10 +15,10 @@
 
   // 1. Change the font styles in all browsers
   // 2. Remove the margin in Firefox and Safari
-  input,
+  #{$parent-selector} input,
-  optgroup,
+  #{$parent-selector} optgroup,
-  select,
+  #{$parent-selector} select,
-  textarea {
+  #{$parent-selector} textarea {
     margin: 0; // 2
     font-size: 1rem; // 1
     line-height: var(#{$css-var-prefix}line-height); // 1
@@ -27,12 +27,12 @@
   }
 
   // Show the overflow in IE.
-  input {
+  #{$parent-selector} input {
     overflow: visible;
   }
 
   // Remove the inheritance of text transform in Edge, Firefox, and IE
-  select {
+  #{$parent-selector} select {
     text-transform: none;
   }
 
@@ -40,7 +40,7 @@
   // 2. Correct the color inheritance from `fieldset` elements in IE
   // 3. Remove the padding so developers are not caught out when they zero out
   // `fieldset` elements in all browsers
-  legend {
+  #{$parent-selector} legend {
     max-width: 100%; // 1
     padding: 0; // 3
     color: inherit; // 2
@@ -48,65 +48,65 @@
   }
 
   // 1. Remove the default vertical scrollbar in IE
-  textarea {
+  #{$parent-selector} textarea {
     overflow: auto; // 1
   }
 
   // Remove the padding in IE 10
-  [type="checkbox"],
+  #{$parent-selector} [type="checkbox"],
-  [type="radio"] {
+  #{$parent-selector} [type="radio"] {
     padding: 0;
   }
 
   // Correct the cursor style of increment and decrement buttons in Safari
-  ::-webkit-inner-spin-button,
+  #{$parent-selector} ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+  #{$parent-selector} ::-webkit-outer-spin-button {
     height: auto;
   }
 
   // 1. Correct the odd appearance in Chrome and Safari
   // 2. Correct the outline style in Safari
-  [type="search"] {
+  #{$parent-selector} [type="search"] {
     -webkit-appearance: textfield; // 1
     outline-offset: -2px; // 2
   }
 
   // Remove the inner padding in Chrome and Safari on macOS
-  [type="search"]::-webkit-search-decoration {
+  #{$parent-selector} [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
   }
 
   // 1. Correct the inability to style clickable types in iOS and Safari
   // 2. Change font properties to `inherit` in Safari
-  ::-webkit-file-upload-button {
+  #{$parent-selector} ::-webkit-file-upload-button {
     -webkit-appearance: button; // 1
     font: inherit; // 2
   }
 
   // Remove the inner border and padding of focus outlines in Firefox
-  ::-moz-focus-inner {
+  #{$parent-selector} ::-moz-focus-inner {
     padding: 0;
     border-style: none;
   }
 
   //  Remove the focus outline in Firefox
-  :-moz-focusring {
+  #{$parent-selector} :-moz-focusring {
     outline: none;
   }
 
   // Remove the additional :invalid styles in Firefox
-  :-moz-ui-invalid {
+  #{$parent-selector} :-moz-ui-invalid {
     box-shadow: none;
   }
 
   // Change the inconsistent appearance in IE (opinionated)
-  ::-ms-expand {
+  #{$parent-selector} ::-ms-expand {
     display: none;
   }
 
   // Remove the border and padding in all browsers (opinionated)
-  [type="file"],
+  #{$parent-selector} [type="file"],
-  [type="range"] {
+  #{$parent-selector} [type="range"] {
     padding: 0;
     border-width: 0;
   }
@@ -115,7 +115,7 @@
   // ––––––––––––––––––––
 
   // Force height for alternatives input types
-  input:not([type="checkbox"], [type="radio"], [type="range"]) {
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
     height: calc(
       (1rem * var(#{$css-var-prefix}line-height)) +
         (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
@@ -124,7 +124,7 @@
   }
 
   // Fieldset
-  fieldset {
+  #{$parent-selector} fieldset {
     width: 100%;
     margin: 0;
     margin-bottom: var(#{$css-var-prefix}spacing);
@@ -133,39 +133,39 @@
   }
 
   // Label & legend
-  label,
+  #{$parent-selector} label,
-  fieldset legend {
+  #{$parent-selector} fieldset legend {
     display: block;
     margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
     color: var(#{$css-var-prefix}color);
     font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
   }
 
-  fieldset legend {
+  #{$parent-selector} fieldset legend {
     margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
   }
 
   // Blocks, 100%
-  input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
-  button[type="submit"],
+  #{$parent-selector} button[type="submit"],
-  select,
+  #{$parent-selector} select,
-  textarea {
+  #{$parent-selector} textarea {
     width: 100%;
   }
 
   // Reset appearance (Not Checkboxes, Radios, Range and File)
-  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
-  select,
+  #{$parent-selector} select,
-  textarea {
+  #{$parent-selector} textarea {
     appearance: none;
     padding: var(#{$css-var-prefix}form-element-spacing-vertical)
       var(#{$css-var-prefix}form-element-spacing-horizontal);
   }
 
   // Commons styles
-  input,
+  #{$parent-selector} input,
-  select,
+  #{$parent-selector} select,
-  textarea {
+  #{$parent-selector} textarea {
     #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
     #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
     #{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
@@ -188,7 +188,8 @@
   }
 
   // Active & Focus
-  input:not(
+  #{$parent-selector}
+    input:not(
       [type="submit"],
       [type="button"],
       [type="reset"],
@@ -196,7 +197,7 @@
       [type="radio"],
       [readonly]
     ),
-  :where(select, textarea):not([readonly]) {
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
     &:is(:active, :focus) {
       #{$css-var-prefix}background-color: var(
         #{$css-var-prefix}form-element-active-background-color
@@ -205,15 +206,17 @@
   }
 
   // Active & Focus
-  input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
+  #{$parent-selector}
-  :where(select, textarea):not([readonly]) {
+    input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
     &:is(:active, :focus) {
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
     }
   }
 
   // Focus
-  input:not(
+  #{$parent-selector}
+    input:not(
       [type="submit"],
       [type="button"],
       [type="reset"],
@@ -221,7 +224,7 @@
       [type="file"],
       [readonly]
     ),
-  :where(select, textarea):not([readonly]) {
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
     &:focus {
       #{$css-var-prefix}box-shadow: 0
         0
@@ -232,22 +235,23 @@
   }
 
   // Disabled
-  input:not([type="submit"], [type="button"], [type="reset"])[disabled],
+  #{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
-  select[disabled],
+  #{$parent-selector} select[disabled],
-  textarea[disabled],
+  #{$parent-selector} textarea[disabled],
-  label[aria-disabled="true"],
+  #{$parent-selector} label[aria-disabled="true"],
-  :where(fieldset[disabled])
+  #{$parent-selector}
+    :where(fieldset[disabled])
     :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
     opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
     pointer-events: none;
   }
 
-  label[aria-disabled="true"] input[disabled] {
+  #{$parent-selector} label[aria-disabled="true"] input[disabled] {
     opacity: 1;
   }
 
   // Aria-invalid
-  :where(input, select, textarea) {
+  #{$parent-selector} :where(input, select, textarea) {
     &:not(
         [type="checkbox"],
         [type="radio"],
@@ -354,7 +358,7 @@
   }
 
   [dir="rtl"] {
-    :where(input, select, textarea) {
+    #{$parent-selector} :where(input, select, textarea) {
       &:not([type="checkbox"], [type="radio"]) {
         &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
           background-position: center left 0.75rem;
@@ -364,24 +368,24 @@
   }
 
   // Placeholder
-  input::placeholder,
+  #{$parent-selector} input::placeholder,
-  input::-webkit-input-placeholder,
+  #{$parent-selector} input::-webkit-input-placeholder,
-  textarea::placeholder,
+  #{$parent-selector} textarea::placeholder,
-  textarea::-webkit-input-placeholder,
+  #{$parent-selector} textarea::-webkit-input-placeholder,
-  select:invalid {
+  #{$parent-selector} select:invalid {
     color: var(#{$css-var-prefix}form-element-placeholder-color);
     opacity: 1;
   }
 
   // Margin bottom (Not Checkboxes and Radios)
-  input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
-  select,
+  #{$parent-selector} select,
-  textarea {
+  #{$parent-selector} textarea {
     margin-bottom: var(#{$css-var-prefix}spacing);
   }
 
   // Select
-  select {
+  #{$parent-selector} select {
     // Unstyle the caret on `<select>`s in IE10+.
     &::-ms-expand {
       border: 0;
@@ -409,7 +413,7 @@
   }
 
   [dir="rtl"] {
-    select {
+    #{$parent-selector} select {
       &:not([multiple], [size]) {
         background-position: center left 0.75rem;
       }
@@ -417,7 +421,7 @@
   }
 
   // Textarea
-  textarea {
+  #{$parent-selector} textarea {
     display: block;
     resize: vertical;
 
@@ -437,7 +441,7 @@
     $helper-previous-tags: $helper-previous-tags + ", .grid";
   }
 
-  :where(#{$helper-previous-tags}) {
+  #{$parent-selector} :where(#{$helper-previous-tags}) {
     + small {
       display: block;
       width: 100%;
@@ -458,7 +462,7 @@
   }
 
   // Styles for Input inside a label
-  label {
+  #{$parent-selector} label {
     > :where(input, select, textarea) {
       margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
     }

scss/forms/_checkbox-radio-switch.scss

@@ -8,15 +8,15 @@
 
   // Labels
   // Not working in Firefox, which doesn't support the `:has()` pseudo-class
-  label {
+  #{$parent-selector} label {
     &:has([type="checkbox"], [type="radio"]) {
       width: fit-content;
       cursor: pointer;
     }
   }
 
-  [type="checkbox"],
+  #{$parent-selector} [type="checkbox"],
-  [type="radio"] {
+  #{$parent-selector} [type="radio"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -55,7 +55,7 @@
   }
 
   // Checkboxes
-  [type="checkbox"] {
+  #{$parent-selector} [type="checkbox"] {
     &:indeterminate {
       #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
       #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
@@ -67,7 +67,7 @@
   }
 
   // Radios
-  [type="radio"] {
+  #{$parent-selector} [type="radio"] {
     border-radius: 50%;
 
     &:checked,
@@ -80,7 +80,7 @@
   }
 
   // Switchs
-  [type="checkbox"][role="switch"] {
+  #{$parent-selector} [type="checkbox"][role="switch"] {
     #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
     #{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
 
@@ -135,8 +135,8 @@
   }
 
   // Aria-invalid
-  [type="checkbox"],
+  #{$parent-selector} [type="checkbox"],
-  [type="checkbox"][role="switch"] {
+  #{$parent-selector} [type="checkbox"][role="switch"] {
     &[aria-invalid="false"] {
       &:checked,
       &:checked:active,
@@ -155,9 +155,9 @@
     }
   }
 
-  [type="checkbox"],
+  #{$parent-selector} [type="checkbox"],
-  [type="radio"],
+  #{$parent-selector} [type="radio"],
-  [type="checkbox"][role="switch"] {
+  #{$parent-selector} [type="checkbox"][role="switch"] {
     &[aria-invalid="false"] {
       &:checked,
       &:checked:active,

scss/forms/_input-color.scss

@@ -17,7 +17,7 @@
    * Input type color
    */
 
-  [type="color"] {
+  #{$parent-selector} [type="color"] {
     &::-webkit-color-swatch-wrapper {
       @include color-wrapper;
     }

scss/forms/_input-date.scss

@@ -7,7 +7,7 @@
    */
 
   // :not() are needed to add Specificity and avoid !important on padding
-  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
     &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
       #{$css-var-prefix}icon-position: 0.75rem;
       #{$css-var-prefix}icon-width: 1rem;
@@ -25,11 +25,11 @@
   }
 
   // Calendar picker
-  [type="date"],
+  #{$parent-selector} [type="date"],
-  [type="datetime-local"],
+  #{$parent-selector} [type="datetime-local"],
-  [type="month"],
+  #{$parent-selector} [type="month"],
-  [type="time"],
+  #{$parent-selector} [type="time"],
-  [type="week"] {
+  #{$parent-selector} [type="week"] {
     &::-webkit-calendar-picker-indicator {
       width: var(#{$css-var-prefix}icon-width);
       margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
@@ -41,11 +41,11 @@
   // Calendar icons are hidden in Firefox
   @if $enable-important {
     @-moz-document url-prefix() {
-      [type="date"],
+      #{$parent-selector} [type="date"],
-      [type="datetime-local"],
+      #{$parent-selector} [type="datetime-local"],
-      [type="month"],
+      #{$parent-selector} [type="month"],
-      [type="time"],
+      #{$parent-selector} [type="time"],
-      [type="week"] {
+      #{$parent-selector} [type="week"] {
         padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
         background-image: none !important;
       }
@@ -53,6 +53,7 @@
   }
 
   [dir="rtl"]
+    #{$parent-selector}
     :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
     text-align: right;
   }

scss/forms/_input-file.scss

@@ -8,7 +8,7 @@
 
   // 1. Hack to display the outline on the focused file selector button
   //    with the forced overflow hidden on the input[type="file"] element.
-  [type="file"] {
+  #{$parent-selector} [type="file"] {
     #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
     margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
     padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;

scss/forms/_input-range.scss

@@ -43,7 +43,7 @@ $border-thumb: 2px;
    * Input type range
    */
 
-  [type="range"] {
+  #{$parent-selector} [type="range"] {
     // Styles
     -webkit-appearance: none;
     -moz-appearance: none;

scss/forms/_input-search.scss

@@ -7,7 +7,7 @@
    */
 
   // :not() are needed to add Specificity and avoid !important on padding
-  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
     &[type="search"] {
       padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
       background-image: var(#{$css-var-prefix}icon-search);
@@ -41,7 +41,7 @@
   }
 
   [dir="rtl"] {
-    :where(input) {
+    #{$parent-selector} :where(input) {
       &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
         &[type="search"] {
           background-position: center right 1.125rem;

scss/layout/_landmarks.scss

@@ -24,7 +24,7 @@
 
   // Pico
   // ––––––––––––––––––––
-  #{$semantic-root-element} {
+  #{$parent-selector} #{$semantic-root-element} {
     > header,
     > main,
     > footer {

scss/layout/_scroller.scss

@@ -7,7 +7,7 @@
    */
 
   // Wrapper to make allow any content to be scrolled horizontally
-  figure {
+  #{$parent-selector} figure {
     display: block;
     margin: 0;
     padding: 0;

scss/layout/_section.scss

@@ -6,7 +6,7 @@
    * Section
    */
 
-  section {
+  #{$parent-selector} section {
     margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
   }
 }

scss/themes/default/_dark.scss

@@ -205,7 +205,7 @@
   @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
     // Change the icon color to black for accordion and dropdown .contrast buttons
     @if $enable-classes {
-      details {
+      #{$parent-selector} details {
         summary {
           &[role="button"].contrast:not(.outline) {
             &::after {
@@ -227,7 +227,7 @@
   @if map.get($modules, "components/loading") {
     // Change the icon color to black for .contrast buttons
     @if $enable-classes {
-      [aria-busy="true"]:not(input, select, textarea) {
+      #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
         &.contrast:is(
             button,
             [type="submit"],

scss/themes/default/_schemes.scss

@@ -30,10 +30,10 @@
     @include dark.theme;
   }
 
-  progress,
+  #{$parent-selector} progress,
-  [type="checkbox"],
+  #{$parent-selector} [type="checkbox"],
-  [type="radio"],
+  #{$parent-selector} [type="radio"],
-  [type="range"] {
+  #{$parent-selector} [type="range"] {
     accent-color: var(#{$css-var-prefix}primary);
   }
 }

scss/themes/default/_styles.scss

@@ -118,24 +118,6 @@
       #{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     }
 
-    // Chevron icons
-    // Change the icon color to white for accordion and dropdown buttons
-    @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
-      details {
-        summary {
-          $selector: '&[role="button"]';
-          @if $enable-classes {
-            $selector: "#{$selector}:not(.outline)";
-          }
-          #{$selector} {
-            &::after {
-              filter: brightness(0) invert(1);
-            }
-          }
-        }
-      }
-    }
-
     // Datetime icons
     @if map.get($modules, "forms/input-date") {
       #{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
@@ -156,19 +138,6 @@
     @if map.get($modules, "components/loading") {
       // Inspired by https://codepen.io/aleksander351/pen/KzgKPo
       #{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
-
-      // Change the icon color to white for buttons
-      [aria-busy="true"]:not(input, select, textarea) {
-        $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
-        @if $enable-classes {
-          $selector: "#{$selector}:not(.outline)";
-        }
-        #{$selector} {
-          &::before {
-            filter: brightness(0) invert(1);
-          }
-        }
-      }
     }
   }
 
@@ -421,4 +390,38 @@
       }
     }
   }
+
+  // Chevron icons
+  // Change the icon color to white for accordion and dropdown buttons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    #{$parent-selector} details {
+      summary {
+        $selector: '&[role="button"]';
+        @if $enable-classes {
+          $selector: "#{$selector}:not(.outline)";
+        }
+        #{$selector} {
+          &::after {
+            filter: brightness(0) invert(1);
+          }
+        }
+      }
+    }
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to white for buttons
+    #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+      $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
+      @if $enable-classes {
+        $selector: "#{$selector}:not(.outline)";
+      }
+      #{$selector} {
+        &::before {
+          filter: brightness(0) invert(1);
+        }
+      }
+    }
+  }
 }

scss/utilities/_accessibility.scss

@@ -14,44 +14,44 @@
   // Accessibility
 
   // Change the cursor on control elements in all browsers (opinionated)
-  [aria-controls] {
+  #{$parent-selector} [aria-controls] {
     cursor: pointer;
   }
 
   // Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
-  [aria-disabled="true"],
+  #{$parent-selector} [aria-disabled="true"],
-  [disabled] {
+  #{$parent-selector} [disabled] {
     cursor: not-allowed;
   }
 
   // Change the display on visually hidden accessible elements in all browsers (opinionated)
-  [aria-hidden="false"][hidden] {
+  #{$parent-selector} [aria-hidden="false"][hidden] {
     display: initial;
   }
 
-  [aria-hidden="false"][hidden]:not(:focus) {
+  #{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
     clip: rect(0, 0, 0, 0);
     position: absolute;
   }
 
   // User interaction
   // Remove the tapping delay in IE 10
-  a,
+  #{$parent-selector} a,
-  area,
+  #{$parent-selector} area,
-  button,
+  #{$parent-selector} button,
-  input,
+  #{$parent-selector} input,
-  label,
+  #{$parent-selector} label,
-  select,
+  #{$parent-selector} select,
-  summary,
+  #{$parent-selector} summary,
-  textarea,
+  #{$parent-selector} textarea,
-  [tabindex] {
+  #{$parent-selector} [tabindex] {
     -ms-touch-action: manipulation;
   }
 
   // Pico
   // ––––––––––––––––––––
 
-  [dir="rtl"] {
+  #{$parent-selector} [dir="rtl"] {
     direction: rtl;
   }
 }

scss/utilities/_reduce-motion.scss

@@ -15,9 +15,9 @@
   // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
   // 4. Remove transitions when motion is reduced (opinionated)
   @media (prefers-reduced-motion: reduce) {
-    *:not([aria-busy="true"]),
+    #{$parent-selector} *:not([aria-busy="true"]),
-    :not([aria-busy="true"])::before,
+    #{$parent-selector} :not([aria-busy="true"])::before,
-    :not([aria-busy="true"])::after {
+    #{$parent-selector} :not([aria-busy="true"])::after {
       background-attachment: initial !important; // 2
       animation-duration: 1ms !important; // 1
       animation-delay: -1ms !important; // 1