@solid-design-system/styles 1.0.1 → 1.2.0

package/dist-versioned/modules/container.css

@@ -1,14 +1,14 @@
 /**
  * Container lets users delimit and highlight a piece of content. The user has no interaction with it, it is merely a visual element that influences the flow of the page.
- * @name sd-1-0-1-container
+ * @name sd-1-2-0-container
  * @status stable
  * @since 1.30.0
- * @variant { primary-100 | primary | border-neutral-400 | white } sd-1-0-1-container--variant-... Defines the background color and border of sd-1-0-1-container.
- * @variant { sm } sd-1-0-1-container--padding-... Defines the padding of sd-1-0-1-container. This makes it adaptable to both small and large screens.
- * @variant { top | right | bottom | left } sd-1-0-1-container--triangle-... Defines an optional triangle cut-out for sd-1-0-1-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
+ * @variant { primary-100 | primary | border-neutral-400 | white } sd-1-2-0-container--variant-... Defines the background color and border of sd-1-2-0-container.
+ * @variant { sm } sd-1-2-0-container--padding-... Defines the padding of sd-1-2-0-container. This makes it adaptable to both small and large screens.
+ * @variant { top | right | bottom | left } sd-1-2-0-container--triangle-... Defines an optional triangle cut-out for sd-1-2-0-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
  */
 
-.sd-1-0-1-container {
+.sd-1-2-0-container {
   position: relative;
   
   background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
@@ -18,18 +18,18 @@
   padding-bottom: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
-.sd-1-0-1-container--variant-primary-100 {
+.sd-1-2-0-container--variant-primary-100 {
   
   background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
 }
 
-.sd-1-0-1-container--variant-primary {
+.sd-1-2-0-container--variant-primary {
   
   background-color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-bg-opacity, 1)) /* Inverted background color (light mode)
 Used for button */;
 }
 
-.sd-1-0-1-container--variant-border-neutral-400 {
+.sd-1-2-0-container--variant-border-neutral-400 {
   border-style: solid;
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
@@ -39,27 +39,27 @@ Used for divider, teaser, container, ...  */;
     border-width: 1px;
 }
 
-.sd-1-0-1-container--variant-white {
+.sd-1-2-0-container--variant-white {
   
   background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
 }
 
-.sd-1-0-1-container--padding-sm {
+.sd-1-2-0-container--padding-sm {
   padding-left: var(--sd-spacing-6, 1.5rem) /* 24px */;
   padding-right: var(--sd-spacing-6, 1.5rem) /* 24px */;
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
 }
 
-.sd-1-0-1-container {
+.sd-1-2-0-container {
 
   --triangle-background: white;
 }
 
-.sd-1-0-1-container--triangle-top::before,
-  .sd-1-0-1-container--triangle-right::before,
-  .sd-1-0-1-container--triangle-bottom::before,
-  .sd-1-0-1-container--triangle-left::before {
+.sd-1-2-0-container--triangle-top::before,
+  .sd-1-2-0-container--triangle-right::before,
+  .sd-1-2-0-container--triangle-bottom::before,
+  .sd-1-2-0-container--triangle-left::before {
   position: absolute;
   display: block;
   border-style: solid;
@@ -68,38 +68,38 @@ Used for divider, teaser, container, ...  */;
     content: '';
 }
 
-.sd-1-0-1-container--triangle-top::before {
+.sd-1-2-0-container--triangle-top::before {
   top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
 }
 
-.sd-1-0-1-container--triangle-right::before {
+.sd-1-2-0-container--triangle-right::before {
   right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
 }
 
-.sd-1-0-1-container--triangle-bottom::before {
+.sd-1-2-0-container--triangle-bottom::before {
   bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
 }
 
-.sd-1-0-1-container--triangle-left::before {
+.sd-1-2-0-container--triangle-left::before {
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
 }
 
-.sd-1-0-1-container--triangle-top-border::after,
-    .sd-1-0-1-container--triangle-top-border::before,
-    .sd-1-0-1-container--triangle-right-border::after,
-    .sd-1-0-1-container--triangle-right-border::before,
-    .sd-1-0-1-container--triangle-bottom-border::after,
-    .sd-1-0-1-container--triangle-bottom-border::before,
-    .sd-1-0-1-container--triangle-left-border::after,
-    .sd-1-0-1-container--triangle-left-border::before {
+.sd-1-2-0-container--triangle-top-border::after,
+    .sd-1-2-0-container--triangle-top-border::before,
+    .sd-1-2-0-container--triangle-right-border::after,
+    .sd-1-2-0-container--triangle-right-border::before,
+    .sd-1-2-0-container--triangle-bottom-border::after,
+    .sd-1-2-0-container--triangle-bottom-border::before,
+    .sd-1-2-0-container--triangle-left-border::after,
+    .sd-1-2-0-container--triangle-left-border::before {
   position: absolute;
   display: block;
   border-style: solid;
@@ -107,78 +107,78 @@ Used for divider, teaser, container, ...  */;
       content: '';
 }
 
-.sd-1-0-1-container--triangle-top-border::after, .sd-1-0-1-container--triangle-right-border::after, .sd-1-0-1-container--triangle-bottom-border::after, .sd-1-0-1-container--triangle-left-border::after {
+.sd-1-2-0-container--triangle-top-border::after, .sd-1-2-0-container--triangle-right-border::after, .sd-1-2-0-container--triangle-bottom-border::after, .sd-1-2-0-container--triangle-left-border::after {
       border-width: 14px;
     }
 
-.sd-1-0-1-container--triangle-top-border::before, .sd-1-0-1-container--triangle-right-border::before, .sd-1-0-1-container--triangle-bottom-border::before, .sd-1-0-1-container--triangle-left-border::before {
+.sd-1-2-0-container--triangle-top-border::before, .sd-1-2-0-container--triangle-right-border::before, .sd-1-2-0-container--triangle-bottom-border::before, .sd-1-2-0-container--triangle-left-border::before {
       border-width: 15px;
     }
 
-.sd-1-0-1-container--triangle-top-border::after,
-    .sd-1-0-1-container--triangle-top-border::before {
+.sd-1-2-0-container--triangle-top-border::after,
+    .sd-1-2-0-container--triangle-top-border::before {
       top: -1px;
     }
 
-.sd-1-0-1-container--triangle-top-border::before {
+.sd-1-2-0-container--triangle-top-border::before {
   --tw-border-opacity: 1;
   border-top-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       left: calc(50% - 15px);
 }
 
-.sd-1-0-1-container--triangle-top-border::after {
+.sd-1-2-0-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
 
-.sd-1-0-1-container--triangle-right-border::after,
-    .sd-1-0-1-container--triangle-right-border::before {
+.sd-1-2-0-container--triangle-right-border::after,
+    .sd-1-2-0-container--triangle-right-border::before {
       right: -1px;
     }
 
-.sd-1-0-1-container--triangle-right-border::before {
+.sd-1-2-0-container--triangle-right-border::before {
   --tw-border-opacity: 1;
   border-right-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       top: calc(50% - 15px);
 }
 
-.sd-1-0-1-container--triangle-right-border::after {
+.sd-1-2-0-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
 
-.sd-1-0-1-container--triangle-bottom-border::after,
-    .sd-1-0-1-container--triangle-bottom-border::before {
+.sd-1-2-0-container--triangle-bottom-border::after,
+    .sd-1-2-0-container--triangle-bottom-border::before {
       bottom: -1px;
     }
 
-.sd-1-0-1-container--triangle-bottom-border::before {
+.sd-1-2-0-container--triangle-bottom-border::before {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       left: calc(50% - 15px);
 }
 
-.sd-1-0-1-container--triangle-bottom-border::after {
+.sd-1-2-0-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
 
-.sd-1-0-1-container--triangle-left-border::after,
-    .sd-1-0-1-container--triangle-left-border::before {
+.sd-1-2-0-container--triangle-left-border::after,
+    .sd-1-2-0-container--triangle-left-border::before {
       left: -1px;
     }
 
-.sd-1-0-1-container--triangle-left-border::before {
+.sd-1-2-0-container--triangle-left-border::before {
   --tw-border-opacity: 1;
   border-left-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       top: calc(50% - 15px);
 }
 
-.sd-1-0-1-container--triangle-left-border::after {
+.sd-1-2-0-container--triangle-left-border::after {
       top: calc(50% - 14px);
       border-left-color: var(--triangle-background);
     }

package/dist-versioned/modules/copyright.css

@@ -1,19 +1,19 @@
 /**
  * Generates basic styles for copyright elements.
- * @name sd-1-0-1-copyright
+ * @name sd-1-2-0-copyright
  * @status stable
  * @since 2.5.0
- * @variant { vertical } sd-1-0-1-copyright--orientation-... The copyright's orientation.
- * @variant { black } sd-1-0-1-copyright--color-... The copyright's text color.
- * @boolean sd-1-0-1-copyright--... Removes the shadow.
- * @variant { top } sd-1-0-1-copyright--placement-... The copyright's placement.
+ * @variant { vertical } sd-1-2-0-copyright--orientation-... The copyright's orientation.
+ * @variant { black } sd-1-2-0-copyright--color-... The copyright's text color.
+ * @boolean sd-1-2-0-copyright--... Removes the shadow.
+ * @variant { top } sd-1-2-0-copyright--placement-... The copyright's placement.
  */
 
-.sd-1-0-1-copyright {
+.sd-1-2-0-copyright {
     position: relative;
 }
 
-.sd-1-0-1-copyright::after {
+.sd-1-2-0-copyright::after {
     position: absolute;
     bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -29,7 +29,7 @@
     content: var(--copyright);
 }
 
-.sd-1-0-1-copyright--orientation-vertical::after {
+.sd-1-2-0-copyright--orientation-vertical::after {
     width: -moz-max-content;
     width: max-content;
     padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
@@ -41,17 +41,17 @@
         transform: rotate(180deg);
 }
 
-.sd-1-0-1-copyright--color-black::after {
+.sd-1-2-0-copyright--color-black::after {
     
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
         filter: drop-shadow(0 0 transparent);
 }
 
-.sd-1-0-1-copyright--no-shadow::after {
+.sd-1-2-0-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
 
-.sd-1-0-1-copyright--placement-top::after {
+.sd-1-2-0-copyright--placement-top::after {
     position: absolute;
     top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;

package/dist-versioned/modules/display.css

@@ -1,13 +1,13 @@
 /**
  * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
- * @name sd-1-0-1-display
+ * @name sd-1-2-0-display
  * @status stable
  * @since 1.7
- * @variant { xl | 3xl } sd-1-0-1-display--size-... The display's size.
- * @boolean sd-1-0-1-display--inverted Inverts the display text.
+ * @variant { xl | 3xl } sd-1-2-0-display--size-... The display's size.
+ * @boolean sd-1-2-0-display--inverted Inverts the display text.
  */
 
-.sd-1-0-1-display {
+.sd-1-2-0-display {
 
     font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
 
@@ -22,13 +22,13 @@
 
 @media (min-width: 1024px) {
 
-    .sd-1-0-1-display {
+    .sd-1-2-0-display {
 
         font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
     }
 }
 
-.sd-1-0-1-display--size-xl {
+.sd-1-2-0-display--size-xl {
 
     font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 
@@ -41,7 +41,7 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-0-1-display--size-3xl {
+.sd-1-2-0-display--size-3xl {
 
     font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
 
@@ -56,13 +56,13 @@
 
 @media (min-width: 1024px) {
 
-    .sd-1-0-1-display--size-3xl {
+    .sd-1-2-0-display--size-3xl {
 
         font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
     }
 }
 
-.sd-1-0-1-display--inverted {
+.sd-1-2-0-display--inverted {
 
     
 

package/dist-versioned/modules/flag.css

@@ -1,12 +1,12 @@
 /**
  * Generates basic styles for flag elements.
- * @name sd-1-0-1-flag
+ * @name sd-1-2-0-flag
  * @status stable
  * @since 1.34.0
- * @variant { neutral-300 | neutral-500 | white } sd-1-0-1-flag--...
+ * @variant { neutral-300 | neutral-500 | white } sd-1-2-0-flag--...
  */
 
-.sd-1-0-1-flag {
+.sd-1-2-0-flag {
 
     display: inline-flex;
 
@@ -33,7 +33,7 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-0-1-flag--neutral-500 {
+.sd-1-2-0-flag--neutral-500 {
 
     
 
@@ -44,14 +44,14 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-0-1-flag--neutral-300 {
+.sd-1-2-0-flag--neutral-300 {
 
     
 
     background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag  */
 }
 
-.sd-1-0-1-flag--white {
+.sd-1-2-0-flag--white {
 
     
 

package/dist-versioned/modules/footnotes.css

@@ -1,12 +1,12 @@
 /**
  * A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
- * @name sd-1-0-1-footnotes
+ * @name sd-1-2-0-footnotes
  * @status stable
  * @since 3.0.0
- * @boolean sd-1-0-1-footnotes--inverted Inverts the footnote text.
+ * @boolean sd-1-2-0-footnotes--inverted Inverts the footnote text.
  */
 
-.sd-1-0-1-footnotes {
+.sd-1-2-0-footnotes {
       margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
       margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
       padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -16,27 +16,134 @@
       color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-0-1-footnotes:is(ol) li {
+.sd-1-2-0-footnotes :target {
+      
+      background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
+}
+
+.sd-1-2-0-footnotes:is(ol) {
+      padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
+}
+
+.sd-1-2-0-footnotes:is(ol) li {
       counter-increment: list-item;
-      display: flex;
-      gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
+      position: relative;
+      list-style-type: none;
     }
 
-.sd-1-0-1-footnotes:is(ol) li::before {
-      width: var(--sd-spacing-5, 1.25rem) /* 20px */;
+.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2))::before, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker))::before {
+      position: absolute;
+      left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
       flex-shrink: 0;
+      font-weight: 700;
+      line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+          content: '[ ' counter(list-item) ' ]';
+          padding-top: 1px;
+          font-size: 10px;
+}
+
+.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker::after, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2))::after, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker))::after {
+          content: none;
+        }
+
+.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker .sd-1-2-0-footnotes--marker, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2)) .sd-1-2-0-footnotes--marker, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker)) .sd-1-2-0-footnotes--marker {
+      display: inline-block;
+          counter-increment: footnotes-multiple;
+}
+
+.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2)) .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker)) .sd-1-2-0-footnotes--marker::before {
+      position: relative;
+      left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+      vertical-align: super;
+      font-weight: 700;
       line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-        content: counter(list-item);
-        padding-top: 1px;
-        font-size: 10px;
+            content: counter(footnotes-multiple, lower-alpha);
 }
 
-.sd-1-0-1-footnotes:is(ul) {
+.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker {
+      bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+      display: block;
+}
+
+.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker:focus-visible {
+      outline-width: 0px;
+}
+
+.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker:focus-visible::before {
+      border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
+}
+
+.sd-1-2-0-footnotes:is(ul) {
     list-style: '';
   }
 
-.sd-1-0-1-footnotes--inverted {
+.sd-1-2-0-footnotes--inverted {
       
       color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
 }
+
+.sd-1-2-0-footnotes--inverted :target {
+      
+      background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
+}
+
+.sd-1-2-0-footnotes--inverted .sd-1-2-0-footnotes--marker::before {
+      
+      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+      outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
+}
+
+.sd-1-2-0-footnotes--inverted:is(.sd-1-2-0-footnotes--marker) {
+      --tw-text-opacity: 1 !important;
+      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
+      outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
+}
+
+.sd-1-2-0-footnotes--inverted:is(.sd-1-2-0-footnotes--marker):target {
+      
+      background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
+}
+
+.sd-1-2-0-footnotes--marker {
+      position: relative;
+      bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
+      display: inline-block;
+      white-space: nowrap;
+      font-weight: 700;
+      text-decoration-line: none !important;
+    font-size: x-small;
+}
+
+.sd-1-2-0-footnotes--marker:target {
+      
+      background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
+}
+
+.sd-1-2-0-footnotes--marker::before {
+      content: '[ ';
+      display: inline-block;
+    }
+
+.sd-1-2-0-footnotes--marker::after {
+      content: ' ]';
+      display: inline-block;
+    }
+
+.sd-1-2-0-footnotes--marker:link,
+    .sd-1-2-0-footnotes--marker:visited {
+      
+      color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+}
+
+.sd-1-2-0-footnotes--marker:focus-visible {
+      border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
+}