From d1ee9eb7a132cde51433e9594513319fdab41f2f Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Fri, 17 May 2024 13:22:42 +0200
Subject: [PATCH] Autofix (stylelint)

---
 docs/_static/custom.css                       | 25 ++++++---
 .../styles/abstracts/_accessibility.scss      |  3 +-
 .../assets/styles/abstracts/_color.scss       |  7 ++-
 .../assets/styles/abstracts/_links.scss       | 30 +++++++---
 .../assets/styles/abstracts/_mixins.scss      |  2 +
 .../assets/styles/base/_base.scss             | 11 +++-
 .../styles/components/_breadcrumbs.scss       |  3 +-
 .../assets/styles/components/_icon-links.scss | 11 ++--
 .../styles/components/_navbar-links.scss      |  1 +
 .../assets/styles/components/_page-toc.scss   |  1 +
 .../assets/styles/components/_prev-next.scss  |  1 +
 .../components/_readthedocs-switcher.scss     |  1 +
 .../assets/styles/components/_search.scss     |  9 ++-
 .../assets/styles/components/_searchbox.scss  |  7 ++-
 .../styles/components/_switcher-theme.scss    |  2 +
 .../styles/components/_switcher-version.scss  | 13 ++++-
 .../assets/styles/components/_toc-inpage.scss |  3 +
 .../styles/components/_versionmodified.scss   | 15 +++--
 .../components/header/_header-logo.scss       |  2 +
 .../assets/styles/content/_admonitions.scss   | 56 +++++++++++++------
 .../assets/styles/content/_api.scss           |  9 ++-
 .../assets/styles/content/_code.scss          |  1 +
 .../assets/styles/content/_figures.scss       |  1 +
 .../assets/styles/content/_footnotes.scss     |  6 +-
 .../assets/styles/content/_hacks.scss         |  8 +--
 .../assets/styles/content/_lists.scss         |  1 +
 .../assets/styles/content/_math.scss          |  2 +
 .../assets/styles/content/_quotes.scss        |  7 ++-
 .../assets/styles/content/_spans.scss         |  4 +-
 .../assets/styles/content/_toctree.scss       |  2 +-
 .../assets/styles/extensions/_ablog.scss      | 12 ++--
 .../assets/styles/extensions/_copybutton.scss |  4 +-
 .../assets/styles/extensions/_execution.scss  |  2 +
 .../styles/extensions/_sphinx_design.scss     | 36 +++++++++---
 .../styles/extensions/_togglebutton.scss      |  5 +-
 .../assets/styles/pages/_search.scss          |  4 +-
 .../assets/styles/sections/_announcement.scss |  2 +-
 .../assets/styles/sections/_article.scss      |  3 +
 .../assets/styles/sections/_container.scss    |  1 +
 .../assets/styles/sections/_header.scss       | 16 +++++-
 .../styles/sections/_sidebar-primary.scss     | 18 +++++-
 .../styles/sections/_sidebar-secondary.scss   |  6 +-
 .../assets/styles/sections/_skip-link.scss    |  1 +
 .../assets/styles/variables/_bootstrap.scss   |  6 +-
 .../assets/styles/variables/_color.scss       | 20 +++++--
 45 files changed, 268 insertions(+), 112 deletions(-)

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index 53d86ec4b..9be1d0b91 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -5,37 +5,44 @@
 /* begin-custom-color/* <your static path>/custom.css */
 
 div.admonition.admonition-olive {
-  border-color: hsl(60, 100%, 25%);
+  border-color: hsl(60deg 100% 25%);
 }
+
 div.admonition.admonition-olive > .admonition-title {
-  background-color: hsl(60, 100%, 14%);
+  background-color: hsl(60deg 100% 14%);
   color: white;
 }
-div.admonition.admonition-olive > .admonition-title:after {
-  color: hsl(60, 100%, 25%);
+
+div.admonition.admonition-olive > .admonition-title::after {
+  color: hsl(60deg 100% 25%);
 }
+
 /* end-custom-color */
 
 /* begin-custom-icon/* <your static path>/custom.css */
 
-div.admonition.admonition-icon > .admonition-title:after {
+div.admonition.admonition-icon > .admonition-title::after {
   content: "\f24e"; /* the fa-scale icon */
 }
+
 /* end-custom-icon */
 
 /* begin-custom-youtube/* <your static path>/custom.css */
 
 div.admonition.admonition-youtube {
-  border-color: hsl(0, 100%, 50%); /* YouTube red */
+  border-color: hsl(0deg 100% 50%); /* YouTube red */
 }
+
 div.admonition.admonition-youtube > .admonition-title {
-  background-color: hsl(0, 99%, 18%);
+  background-color: hsl(0deg 99% 18%);
   color: white;
 }
-div.admonition.admonition-youtube > .admonition-title:after {
-  color: hsl(0, 100%, 50%);
+
+div.admonition.admonition-youtube > .admonition-title::after {
+  color: hsl(0deg 100% 50%);
   content: "\f26c"; /* fa-solid fa-tv */
 }
+
 /* end-custom-youtube */
 
 /* fix for project names that are parsed as links: the whole card is a link so
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_accessibility.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_accessibility.scss
index 398dd731e..b1bc2ab45 100644
--- a/src/pydata_sphinx_theme/assets/styles/abstracts/_accessibility.scss
+++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_accessibility.scss
@@ -22,6 +22,7 @@
 
   @each $fg in $foregrounds {
     $contrast-ratio: get-contrast-ratio($bg, $fg);
+
     @if $contrast-ratio >= $min-contrast-ratio {
       @return $fg;
     } @else if $contrast-ratio > $max-ratio {
@@ -29,8 +30,8 @@
       $max-ratio-color: $fg;
     }
   }
-  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$bg}...";
 
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$bg}...";
   @return $max-ratio-color;
 }
 
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss
index bc4aa0385..27fdbf7da 100644
--- a/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss
@@ -8,7 +8,7 @@
 // We must add ::before pseudo-element to some theme components (such as admonitions)
 // because users were instructed to customize the background color this way.
 @mixin legacy-backdrop-placeholder {
-  &:before {
+  &::before {
     content: "";
     width: 100%;
     height: 100%;
@@ -16,6 +16,7 @@
     left: 0;
     top: 0;
     z-index: -1;
+
     // So that hovering over the text within background is still possible.
     // Otherwise the background overlays the text and you cannot click or select easily.
     // ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
@@ -33,6 +34,7 @@
   @each $key in $keys {
     $map: map-get($map, $key);
   }
+
   @return $map;
 }
 
@@ -47,6 +49,7 @@
   @if type-of($color) == string {
     $color: from-hex($color);
   }
+
   @return $color;
 }
 
@@ -99,8 +102,8 @@
   $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
   $string: to-lower-case($string);
   $length: str-length($string);
-
   $dec: 0;
+
   @for $i from 1 through $length {
     $factor: 1 + (15 * ($length - $i));
     $index: index($hex, str-slice($string, $i, $i));
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
index 989d72856..e7ec47432 100644
--- a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
+++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
@@ -10,10 +10,12 @@
 // - 0.0625rem if it's thicker than 1px because the user has changed the text
 //   size in their browser
 $link-underline-thickness: unquote("max(1px, .0625rem)") !default;
+
 // Offset of link underlines from text baseline
 // The default is 3px expressed as ems, as calculated against the default body
 // font size (on desktop).
 $link-underline-offset: 0.1578em !default;
+
 // Thickness of link underlines in hover state
 // The default for each link will be the thickest of the following:
 //  - 3px
@@ -41,6 +43,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-decoration-hover {
   @if $link-hover-decoration-thickness {
     text-decoration-thickness: $link-hover-decoration-thickness;
+
     // Disable ink skipping on underlines on hover.
     text-decoration-skip-ink: none;
   }
@@ -52,6 +55,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-style-hover {
   @include link-decoration;
   @include link-decoration-hover;
+
   color: var(--pst-color-link-hover);
 }
 
@@ -62,12 +66,13 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-style-default {
   // So that really long links don't spill out of their container
   word-wrap: break-word;
-
   color: var(--pst-color-link);
+
   @include link-decoration;
 
   &:hover {
     color: var(--pst-color-link-hover);
+
     @include link-decoration-hover;
   }
 
@@ -79,6 +84,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   // Visited should still be hoverable
   &:visited {
     color: var(--pst-color-link);
+
     &:hover {
       color: var(--pst-color-link-hover);
     }
@@ -95,6 +101,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 
   &:hover {
     color: var(--pst-color-link-hover);
+
     @include link-decoration;
     @include link-decoration-hover;
   }
@@ -113,6 +120,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
     text-decoration: underline;
     background-color: transparent;
     color: var(--pst-color-link-hover);
+
     @include link-decoration-hover;
   }
 
@@ -137,13 +145,16 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-sidebar-current {
   font-weight: 600;
   color: var(--pst-color-primary);
+
   @if $link-hover-decoration-thickness {
     $notch-shadow: inset
       $link-hover-decoration-thickness
-      0px
-      0px
+      0
+      0
       var(--pst-color-primary);
+
     box-shadow: $notch-shadow;
+
     &:focus-visible {
       box-shadow: $notch-shadow, $focus-ring-box-shadow;
       outline: none;
@@ -159,6 +170,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-navbar-current {
   font-weight: 600;
   color: var(--pst-color-primary);
+
   @if $link-hover-decoration-thickness {
     border-bottom: $link-hover-decoration-thickness
       solid
@@ -173,10 +185,11 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin icon-navbar-hover {
   &:hover {
     color: var(--pst-color-link-hover);
+
     @if $link-hover-decoration-thickness {
-      box-shadow: 0px
+      box-shadow: 0
         $link-hover-decoration-thickness
-        0px
+        0
         var(--pst-color-link-hover);
     }
   }
@@ -203,14 +216,12 @@ corresponds to the section in the docs that the user is currently reading.
   > .nav-link {
     // Set up pseudo-element for hover and current states below.
     position: relative;
+
     &::before {
       content: "";
       display: block;
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       background-color: transparent;
     }
 
@@ -244,6 +255,7 @@ corresponds to the section in the docs that the user is currently reading.
     &:focus-visible {
       box-shadow: $focus-ring-box-shadow;
     }
+
     &:hover {
       text-decoration: none;
       box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover); // purple focus ring
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
index d2375179f..29ef9d1ed 100644
--- a/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
+++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
@@ -46,9 +46,11 @@
       &:nth-child(odd) {
         background-color: var(--pst-color-table-row-zebra-low-bg);
       }
+
       &:nth-child(even) {
         background-color: var(--pst-color-table-row-zebra-high-bg);
       }
+
       &:hover {
         background-color: var(--pst-color-table-row-hover-bg);
       }
diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss
index d870b4b69..ef7ea04a3 100644
--- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss
+++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss
@@ -41,7 +41,7 @@ a {
     color: var(--pst-color-secondary);
     opacity: 0.7;
     font-size: 0.8em;
-    padding: 0 4px 0 4px;
+    padding: 0 4px;
     margin-left: 0.2em;
     text-decoration: none;
     transition: all 0.2s ease-out;
@@ -80,6 +80,7 @@ a {
 
 h1 {
   @extend .heading-style;
+
   margin-top: 0;
   font-size: var(--pst-font-size-h1);
   color: var(--pst-heading-color);
@@ -87,30 +88,35 @@ h1 {
 
 h2 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h2);
   color: var(--pst-heading-color);
 }
 
 h3 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h3);
   color: var(--pst-heading-color);
 }
 
 h4 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h4);
   color: var(--pst-heading-color);
 }
 
 h5 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h5);
   color: var(--pst-color-text-base);
 }
 
 h6 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h6);
   color: var(--pst-color-text-base);
 }
@@ -151,7 +157,7 @@ code {
 }
 
 pre {
-  margin: 1.5em 0 1.5em 0;
+  margin: 1.5em 0;
   padding: 1rem;
   background-color: var(--pst-color-surface);
   color: var(--pst-color-text-base);
@@ -186,6 +192,7 @@ pre {
 
   &:hover {
     @include link-style-hover;
+
     text-decoration-thickness: 1px;
     background-color: var(--pst-violet-600);
     color: var(--pst-color-secondary-text);
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss b/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss
index 6c94056f7..a2d02ab26 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss
@@ -17,12 +17,13 @@ ul.bd-breadcrumbs {
     // Style should look like heavier in-page links
     // keeping visited in the default link colour
     font-weight: bold;
+
     a {
       @include link-style-text;
     }
 
     // Items that aren't the home have a caret to the left
-    &:not(.breadcrumb-home):before {
+    &:not(.breadcrumb-home)::before {
       font: var(--fa-font-solid);
       font-size: 0.8rem;
       content: var(--pst-breadcrumb-divider);
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss b/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss
index b8ec00c22..e6f726a18 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss
@@ -4,16 +4,17 @@
 
 .navbar-icon-links {
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   column-gap: 1rem;
-  flex-wrap: wrap;
   justify-content: space-evenly;
 
   // Remove the padding so that we can define it with flexbox gap above
   li.nav-item a.nav-link {
     padding-left: 0;
     padding-right: 0;
+
     @include icon-navbar-hover;
+
     &:focus {
       color: inherit;
     }
@@ -36,15 +37,15 @@
     }
 
     /* Social media buttons hard-code the brand color */
-    &.fa-square-twitter:before {
+    &.fa-square-twitter::before {
       color: #55acee;
     }
 
-    &.fa-square-gitlab:before {
+    &.fa-square-gitlab::before {
       color: #548;
     }
 
-    &.fa-bitbucket:before {
+    &.fa-bitbucket::before {
       color: #0052cc;
     }
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss b/src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss
index 4bfd7f323..cd27e56ff 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss
@@ -23,6 +23,7 @@
       height: 100%;
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
+
       @include link-style-text;
     }
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_page-toc.scss b/src/pydata_sphinx_theme/assets/styles/components/_page-toc.scss
index 4171cd012..5a6dcf08c 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_page-toc.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_page-toc.scss
@@ -14,6 +14,7 @@
   // override bootstrap settings
   .nav-link {
     font-size: var(--pst-sidebar-font-size-mobile);
+
     @include media-breakpoint-up($breakpoint-sidebar-secondary) {
       font-size: var(--pst-sidebar-font-size);
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss b/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss
index 05eec00f4..f94b33950 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss
@@ -27,6 +27,7 @@
 
     p.prev-next-title {
       @include link-style-default;
+
       font-weight: var(--pst-admonition-font-weight-heading);
       font-size: 1.1em;
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss
index 8e9bb83dc..3e038bf41 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss
@@ -31,6 +31,7 @@
         font-weight: var(--pst-admonition-font-weight-heading);
       }
     }
+
     .fa.fa-caret-down {
       color: var(--pst-color-text-muted);
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss
index 4dad106aa..d4768c3c8 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss
@@ -37,7 +37,7 @@
     // Remove the little "x" that pops up when you start typing
     &::-webkit-search-cancel-button,
     &::-webkit-search-decoration {
-      -webkit-appearance: none;
+      appearance: none;
       appearance: none;
     }
   }
@@ -95,9 +95,11 @@
 .search-button__overlay {
   display: none;
 }
+
 .search-button__wrapper.show {
   .search-button__search-container {
     display: flex;
+
     // Center in middle of screen just underneath header
     position: fixed;
     z-index: $zindex-modal;
@@ -118,8 +120,8 @@
     opacity: 0.5;
     width: 100%;
     height: 100%;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
   }
 
   form.bd-search {
@@ -141,6 +143,7 @@
  */
 .search-button-field {
   $search-button-border-radius: 1.5em;
+
   display: inline-flex;
   align-items: center;
   border: var(--pst-color-border) solid 1px;
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_searchbox.scss b/src/pydata_sphinx_theme/assets/styles/components/_searchbox.scss
index 7ae93cb63..948ea60ac 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_searchbox.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_searchbox.scss
@@ -16,7 +16,7 @@ div#searchbox {
     }
 
     // Put outer shadow on this one so that we can darken the link w/ an inner shadow
-    @include box-shadow();
+    @include box-shadow;
 
     // Style the button to look like a Sphinx Design button
     a {
@@ -29,11 +29,12 @@ div#searchbox {
 
       // The box shadow is inset so that it darkens the button on hover
       transition: box-shadow 0.25s ease-out;
+
       &:hover {
-        box-shadow: inset 0px 0px 50px 50px rgba(0, 0, 0, 0.25);
+        box-shadow: inset 0 0 50px 50px rgb(0 0 0 / 25%);
       }
 
-      &:before {
+      &::before {
         content: var(--pst-icon-search-minus);
         color: unset;
         font: var(--fa-font-solid);
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
index 838afb268..19b180124 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
@@ -34,9 +34,11 @@
 html[data-mode="auto"] .theme-switch-button span[data-mode="auto"] {
   display: flex;
 }
+
 html[data-mode="light"] .theme-switch-button span[data-mode="light"] {
   display: flex;
 }
+
 html[data-mode="dark"] .theme-switch-button span[data-mode="dark"] {
   display: flex;
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
index 14230f28c..01ae283cc 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
@@ -1,19 +1,24 @@
 button.btn.version-switcher__button {
   border-color: var(--pst-color-border);
   color: var(--pst-color-text-base);
+
   // Add a margin on narrow screens to avoid feeling cramped
   margin-bottom: 1em;
+
   @include media-breakpoint-up($breakpoint-sidebar-primary) {
     margin-bottom: unset;
   }
+
   &:hover {
     box-shadow: 0 0 0 $focus-ring-width var(--pst-color-secondary);
     border-color: transparent;
   }
+
   &:active {
     color: var(--pst-color-text-base);
     border-color: var(--pst-color-border);
   }
+
   &:focus-visible {
     border-color: transparent;
   }
@@ -31,16 +36,20 @@ button.btn.version-switcher__button {
     &:not(:last-child) {
       border-bottom: 1px solid var(--pst-color-border);
     }
+
     &:hover {
       @include link-style-hover;
+
       background-color: var(--pst-color-surface);
     }
+
     &.active {
       @include link-sidebar-current;
+
       position: relative;
       z-index: 1;
 
-      span:before {
+      span::before {
         content: "";
         width: 100%;
         height: 100%;
@@ -50,6 +59,7 @@ button.btn.version-switcher__button {
         top: 0;
       }
     }
+
     &:focus-visible {
       z-index: 10; // keep focus ring on top (prevent the hover background of the next dropdown item from covering the ring)
     }
@@ -61,6 +71,7 @@ button.version-switcher__button,
 .version-switcher__menu {
   font-size: 1.1em; // A bit smaller than other menu font
   z-index: $zindex-modal; // higher than the sidebars
+
   @include media-breakpoint-up($breakpoint-sidebar-primary) {
     font-size: unset;
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
index 7bfc028c2..af98dc4c3 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
@@ -1,4 +1,5 @@
 /* Collapsing of the TOC sidebar while scrolling */
+
 /* Nav: hide second level (shown on .active) */
 
 nav.page-toc {
@@ -24,6 +25,7 @@ nav.page-toc {
 // Each entry of the in-page TOC
 .toc-entry {
   display: block;
+
   a > code {
     color: var(--pst-color-text-muted);
   }
@@ -40,6 +42,7 @@ nav.page-toc {
 
     &.active {
       @include link-sidebar-current;
+
       background-color: transparent;
 
       &:hover {
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
index bf206f0a7..4151482b8 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
@@ -3,8 +3,9 @@ div.versionchanged,
 div.deprecated {
   vertical-align: middle;
   margin: 1.5625em auto;
-  padding: 0 0.6rem 0 0.6rem;
+  padding: 0 0.6rem;
   overflow: hidden;
+
   /* break-inside has replaced page-break-inside and is widely usable since 2019 */
   page-break-inside: avoid;
   break-inside: avoid;
@@ -12,7 +13,9 @@ div.deprecated {
   border-color: var(--pst-color-info);
   border-radius: $admonition-border-radius;
   background-color: var(--pst-color-on-background);
-  @include box-shadow();
+
+  @include box-shadow;
+
   position: relative;
 
   > p {
@@ -39,7 +42,7 @@ div.deprecated {
 span.versionmodified {
   font-weight: 600;
 
-  &:before {
+  &::before {
     margin-right: 0.6rem;
     color: var(--pst-color-info);
     font: var(--fa-font-solid);
@@ -48,21 +51,21 @@ span.versionmodified {
 }
 
 span.versionmodified.added {
-  &:before {
+  &::before {
     color: var(--pst-color-success);
     content: var(--pst-icon-versionmodified-added);
   }
 }
 
 span.versionmodified.changed {
-  &:before {
+  &::before {
     color: var(--pst-color-warning);
     content: var(--pst-icon-versionmodified-changed);
   }
 }
 
 span.versionmodified.deprecated {
-  &:before {
+  &::before {
     color: var(--pst-color-danger);
     content: var(--pst-icon-versionmodified-deprecated);
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss b/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss
index 216baa09e..5e96d66f2 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss
@@ -10,6 +10,7 @@
   width: auto;
   margin: 0;
   display: flex;
+
   // Ensure that the logo stays the same length while other content shrinks
   flex-shrink: 0;
   align-items: center;
@@ -31,6 +32,7 @@
   &:hover,
   &:visited:hover {
     @include link-style-hover;
+
     color: var(--pst-color-text-base);
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
index c158679c2..ea74e5d3a 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
@@ -4,11 +4,13 @@
  */
 $admonition-border-radius: 0.25rem;
 $admonition-left-border-width: 0.2rem;
+
 div.admonition,
 .admonition {
   margin: 1.5625em auto;
-  padding: 0 0.6rem 0.8rem 0.6rem;
+  padding: 0 0.6rem 0.8rem;
   overflow: hidden;
+
   /* break-inside has replaced page-break-inside and is widely usable since 2019 */
   page-break-inside: avoid;
   break-inside: avoid;
@@ -16,7 +18,8 @@ div.admonition,
   border-color: var(--pst-color-info);
   border-radius: $admonition-border-radius;
   background-color: var(--pst-color-on-background);
-  @include box-shadow();
+
+  @include box-shadow;
 
   // Last item should have no spacing since we'll control that w/ padding
   *:last-child {
@@ -41,12 +44,15 @@ div.admonition,
     padding: 0.4rem 0.6rem 0.4rem 2rem;
     font-weight: var(--pst-admonition-font-weight-heading);
     position: relative;
+
     @include legacy-backdrop-placeholder;
+
     background-color: var(--pst-color-info-bg);
+
     // now that we use solid colors we want the title on top
     z-index: 1;
 
-    &:after {
+    &::after {
       position: absolute;
       left: 0.5rem;
       width: 1rem;
@@ -66,10 +72,11 @@ div.admonition,
 
   &.attention {
     border-color: var(--pst-color-attention);
+
     > .admonition-title {
       background-color: var(--pst-color-attention-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-attention);
         content: var(--pst-icon-admonition-attention);
       }
@@ -78,10 +85,11 @@ div.admonition,
 
   &.caution {
     border-color: var(--pst-color-warning);
+
     > .admonition-title {
       background-color: var(--pst-color-warning-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-warning);
         content: var(--pst-icon-admonition-caution);
       }
@@ -90,10 +98,11 @@ div.admonition,
 
   &.warning {
     border-color: var(--pst-color-warning);
+
     > .admonition-title {
       background-color: var(--pst-color-warning-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-warning);
         content: var(--pst-icon-admonition-warning);
       }
@@ -102,10 +111,11 @@ div.admonition,
 
   &.danger {
     border-color: var(--pst-color-danger);
+
     > .admonition-title {
       background-color: var(--pst-color-danger-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-danger);
         content: var(--pst-icon-admonition-danger);
       }
@@ -114,10 +124,11 @@ div.admonition,
 
   &.error {
     border-color: var(--pst-color-danger);
+
     > .admonition-title {
       background-color: var(--pst-color-danger-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-danger);
         content: var(--pst-icon-admonition-error);
       }
@@ -126,10 +137,11 @@ div.admonition,
 
   &.hint {
     border-color: var(--pst-color-success);
+
     > .admonition-title {
       background-color: var(--pst-color-success-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-success);
         content: var(--pst-icon-admonition-hint);
       }
@@ -138,10 +150,11 @@ div.admonition,
 
   &.tip {
     border-color: var(--pst-color-success);
+
     > .admonition-title {
       background-color: var(--pst-color-success-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-success);
         content: var(--pst-icon-admonition-tip);
       }
@@ -150,10 +163,11 @@ div.admonition,
 
   &.important {
     border-color: var(--pst-color-attention);
+
     > .admonition-title {
       background-color: var(--pst-color-attention-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-attention);
         content: var(--pst-icon-admonition-important);
       }
@@ -162,10 +176,11 @@ div.admonition,
 
   &.note {
     border-color: var(--pst-color-info);
+
     > .admonition-title {
       background-color: var(--pst-color-info-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-info);
         content: var(--pst-icon-admonition-note);
       }
@@ -174,10 +189,11 @@ div.admonition,
 
   &.seealso {
     border-color: var(--pst-color-success);
+
     > .admonition-title {
       background-color: var(--pst-color-success-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-success);
         content: var(--pst-icon-admonition-seealso);
       }
@@ -186,10 +202,11 @@ div.admonition,
 
   &.admonition-todo {
     border-color: var(--pst-color-secondary);
+
     > .admonition-title {
       background-color: var(--pst-color-secondary-bg);
 
-      &:after {
+      &::after {
         color: var(--pst-color-secondary);
         content: var(--pst-icon-admonition-todo);
       }
@@ -240,8 +257,8 @@ div.admonition,
 
     // No inner margin since we have less horizontal space w/ the sidebar
     p.admonition-title ~ * {
-      margin-left: 0rem;
-      margin-right: 0rem;
+      margin-left: 0;
+      margin-right: 0;
     }
   }
 }
@@ -265,10 +282,11 @@ aside.topic {
   border-color: var(--pst-color-border);
   border-radius: $admonition-border-radius;
   padding: 1rem 1.25rem;
-  @include box-shadow();
+
+  @include box-shadow;
 
   .topic-title {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 0.5rem;
   }
 
   // Over-ride text color to ensure enough contrast
@@ -294,9 +312,11 @@ aside.sidebar {
   border: 1px solid var(--pst-color-border);
   background-color: var(--pst-color-surface);
   border-radius: $admonition-border-radius;
+
   // to match the admonition-styled sidebars:
   margin-left: 0.5rem;
   padding: 0;
+
   > *:last-child {
     padding-bottom: 1rem;
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
index aa76411a5..bcd5decf0 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss
@@ -29,7 +29,7 @@ table.field-list {
     /* reduced space around parameter description */
     blockquote {
       border-left: none;
-      margin: 0em 0em 0.3em;
+      margin: 0 0 0.3em;
       padding-left: 30px;
     }
   }
@@ -51,7 +51,7 @@ table.field-list {
   font-family: var(--pst-font-family-monospace);
 }
 
-/* C++ specific styling - overriding the basic.css to avoid custom colors*/
+/* C++ specific styling - overriding the basic.css to avoid custom colors */
 
 .sig-inline.c-texpr,
 .sig-inline.cpp-texpr {
@@ -121,6 +121,7 @@ dl > dt > a:has(.viewcode-link) {
   // floated-right element. To fix the glitch, we apply the float rule on the
   // parent rather than the child.
   float: right;
+
   .viewcode-link {
     float: none;
   }
@@ -132,9 +133,7 @@ dl > dt > a:has(.viewcode-link) {
 
 // the API selector
 // from https://github.com/pradyunsg/furo/blob/main/src/furo/assets/styles/content/_api.sass#L6)
-dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(
-    .simple
-  ) {
+dl[class]:not(.option-list, .field-list, .footnote, .glossary, .simple) {
   //increase margin bottom after the dl elements
   margin-bottom: 3rem;
 
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_code.scss b/src/pydata_sphinx_theme/assets/styles/content/_code.scss
index 07ea87398..84080928d 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_code.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_code.scss
@@ -39,6 +39,7 @@ div.literal-block-wrapper {
   div[class*="highlight-"] {
     margin: 0;
     border-radius: 0;
+
     pre {
       border: none;
       box-shadow: none;
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_figures.scss b/src/pydata_sphinx_theme/assets/styles/content/_figures.scss
index 4f7d6f77a..f5e89f1c6 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_figures.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_figures.scss
@@ -13,6 +13,7 @@ figure {
     position: absolute;
     font-size: inherit;
   }
+
   // Default headerlink hover doesn't trigger on figures
   &:hover a.headerlink {
     visibility: visible;
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss
index 6751183bf..5d82f3a14 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss
@@ -1,10 +1,10 @@
 // For consistency, add bracket around footnotes/citations which are
 // cited more than once. E.g. [Newton](1,2) instead of Newton(1,2)
-dt.label > span.brackets:not(:only-child):before {
+dt.label > span.brackets:not(:only-child)::before {
   content: "[";
 }
 
-dt.label > span.brackets:not(:only-child):after {
+dt.label > span.brackets:not(:only-child)::after {
   content: "]";
 }
 
@@ -17,9 +17,11 @@ a.footnote-reference {
 // Docutils 0.18 uses an `aside.footnote` container with different internal structure
 aside.footnote {
   margin-bottom: 0.5rem;
+
   &:last-child {
     margin-bottom: 1rem;
   }
+
   span.label,
   span.backrefs {
     font-weight: bold;
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_hacks.scss b/src/pydata_sphinx_theme/assets/styles/content/_hacks.scss
index 054403d8b..f3b5041c7 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_hacks.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_hacks.scss
@@ -9,8 +9,8 @@ span.linenos,
 div.doctest > div.highlight span.gp {
   /* gp: Generic.Prompt */
   user-select: none;
-  -webkit-user-select: text; /* Safari fallback only */
-  -webkit-user-select: none; /* Chrome/Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+ */
+  user-select: text; /* Safari fallback only */
+  user-select: none; /* Chrome/Safari */
+  user-select: none; /* Firefox */
+  user-select: none; /* IE10+ */
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_lists.scss b/src/pydata_sphinx_theme/assets/styles/content/_lists.scss
index ae40a3151..957b549eb 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_lists.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_lists.scss
@@ -8,6 +8,7 @@ dd {
 ol,
 ul {
   padding-inline-start: 2rem;
+
   li > p:first-child {
     margin-bottom: 0.25rem;
     margin-top: 0.25rem;
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_math.scss b/src/pydata_sphinx_theme/assets/styles/content/_math.scss
index 192d046b8..fad65a001 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_math.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_math.scss
@@ -11,6 +11,7 @@ div.math {
   align-items: center;
   display: flex;
   max-width: 100%;
+
   // This will be over-ridden for the y-direction and divs
   overflow: hidden;
 }
@@ -23,6 +24,7 @@ span.math {
 // Block-level only
 div.math {
   gap: 0.5em;
+
   // So that the eqno shows up after the equation
   flex-direction: row-reverse;
 
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
index 93205697b..7bd946e60 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss
@@ -1,6 +1,6 @@
 // GitHub blockquote style
 blockquote {
-  padding: 1em 1em;
+  padding: 1em;
   color: var(--pst-color-text-muted);
   border-left: 0.25em solid var(--pst-color-blockquote-notch);
   border-radius: $admonition-border-radius;
@@ -12,7 +12,7 @@ blockquote {
 
   // remove padding from included line-block to avoid duplication
   .line-block {
-    margin: 0 0;
+    margin: 0;
   }
 
   // remove margin bottom for the last p
@@ -21,6 +21,7 @@ blockquote {
   }
 
   @include legacy-backdrop-placeholder;
+
   background-color: var(--pst-color-surface);
 
   // Ensure there is enough contrast against the background
@@ -29,7 +30,7 @@ blockquote {
   }
 
   //hack to make the text in the blockquote selectable
-  &:before {
+  &::before {
     z-index: -1;
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
index 9af1eb436..5f2ae156d 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -10,11 +10,13 @@ span.guilabel {
   padding: 2.4px 6px;
   margin: auto 2px;
   position: relative;
+
   @include legacy-backdrop-placeholder;
+
   background-color: var(--pst-color-info-bg);
 }
 
-a.reference.download:before {
+a.reference.download::before {
   content: var(--pst-icon-download);
   font: var(--fa-font-solid);
   font-size: 0.8em;
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_toctree.scss b/src/pydata_sphinx_theme/assets/styles/content/_toctree.scss
index d216ab74f..ddc6cb12e 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_toctree.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_toctree.scss
@@ -4,7 +4,7 @@
 .toctree-wrapper {
   p.caption {
     font-size: 1.5em;
-    margin-bottom: 0em;
+    margin-bottom: 0;
   }
 
   & > ul {
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss
index cd57f81b0..694cea1d3 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss
@@ -10,6 +10,7 @@
   h2,
   h3 {
     font-size: var(--pst-sidebar-header-font-size);
+
     // Remove unnecessary vertical whitespace
     margin-top: 0.5rem;
 
@@ -24,8 +25,10 @@
     // No bullet points for the primary sidebar items
     list-style: none;
     padding-left: 0;
+
     // Otherwise a scrollbar randomly shows up
     overflow-y: hidden;
+
     // List of recent post items
     display: flex;
     flex-direction: column;
@@ -70,7 +73,7 @@
       gap: 1rem;
       line-height: 1.5rem;
 
-      i:before {
+      i::before {
         color: var(--pst-color-text-base);
       }
     }
@@ -78,7 +81,7 @@
 
   // The first span is for the previous page and aligns to the left
   span.ablog__prev {
-    i.fa-arrow-circle-left:before {
+    i.fa-arrow-circle-left::before {
       content: var(--pst-icon-angle-left);
     }
   }
@@ -94,7 +97,7 @@
     margin-left: auto;
     text-align: right;
 
-    i.fa-arrow-circle-right:before {
+    i.fa-arrow-circle-right::before {
       content: var(--pst-icon-angle-right);
     }
   }
@@ -113,8 +116,7 @@
     // Post metadata tags (author, links ,etc) should be a bit smaller
     .ablog-archive {
       display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
+      flex-flow: row wrap;
       gap: 1rem;
       list-style: none;
       font-size: 0.75rem;
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_copybutton.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_copybutton.scss
index 93524a0c3..d83359e82 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_copybutton.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_copybutton.scss
@@ -10,12 +10,12 @@ div.highlight button.copybtn {
   justify-content: center;
 
   // Removes the button background so we more naturally blend with the code cell.
-  background-color: unset;
 
   // Don't over-ride the success color
   &:not(.success) {
     color: var(--pst-color-muted);
   }
+
   border: none;
   background-color: var(--pst-color-surface);
 
@@ -27,7 +27,7 @@ div.highlight button.copybtn {
   }
 
   // Tooltip styling
-  &.o-tooltip--left:after {
+  &.o-tooltip--left::after {
     color: var(--pst-color-text);
     background-color: var(--pst-color-surface);
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_execution.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_execution.scss
index a1e8fc684..42505e3be 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_execution.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_execution.scss
@@ -21,6 +21,7 @@
   div.highlight {
     border-radius: 0.25rem;
   }
+
   div.highlight {
     background-color: var(--pst-color-surface);
   }
@@ -29,6 +30,7 @@
   .cell_input,
   .cell_output {
     border-radius: 0.25rem;
+
     pre {
       padding: 1rem;
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
index e4fd78db7..98319e03e 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
@@ -60,20 +60,23 @@ $extra-semantic-colors: (
   "dark": $foundation-dark-gray,
   "black": $foundation-black,
 );
-
 $all-colors: map-merge($pst-semantic-colors, $extra-semantic-colors);
 
 @mixin create-sd-colors($value, $name) {
   // define the pst variables, so that downstream user overrides will work
   --pst-color-#{$name}: #{$value};
+
   // we are now using a11y-combination to calculate the text color - this is based
   // on the WCAG color contrast guidelines
   --pst-color-#{$name}-text: #{a11y-combination($value)};
+
   //TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work
   --pst-color-#{$name}-highlight: #{darken($value, 15%)};
+
   // override the sphinx-design variables
   --sd-color-#{$name}: var(--pst-color-#{$name});
   --sd-color-#{$name}-text: var(--pst-color-#{$name}-text);
+
   //TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work
   --sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight);
 }
@@ -84,6 +87,7 @@ $all-colors: map-merge($pst-semantic-colors, $extra-semantic-colors);
     // check if this color is defined differently for light/dark
     @each $name in $sd-semantic-color-names {
       $definition: map-get($all-colors, $name);
+
       @if type-of($definition) == map {
         @each $key, $value in $definition {
           @if str-index($key, $mode) != null {
@@ -92,18 +96,22 @@ $all-colors: map-merge($pst-semantic-colors, $extra-semantic-colors);
             // correct mode (light/dark)
             @if str-index($key, "bg") != null {
               --sd-color-#{$name}-bg: #{$value};
+
               // create local variable
               $bg-var: --sd-color-#{$name}-bg;
               $value: check-color($value);
+
               --sd-color-#{$name}-bg-text: #{a11y-combination($value)};
             } @else {
               $value: check-color($value);
+
               @include create-sd-colors($value, $name);
             }
           }
         }
       } @else {
         $value: map-get($all-colors, $name);
+
         @include create-sd-colors($value, $name);
       }
     }
@@ -125,7 +133,7 @@ html[data-theme="light"] {
   .sd-shadow-sm,
   .sd-shadow-md,
   .sd-shadow-lg {
-    @include box-shadow();
+    @include box-shadow;
   }
 }
 
@@ -141,6 +149,7 @@ html[data-theme="light"] {
     background-color: var(--pst-color-panel-background);
     border-bottom: 1px solid var(--pst-color-border);
   }
+
   .sd-card-footer {
     background-color: var(--pst-color-panel-background);
     border-top: 1px solid var(--pst-color-border);
@@ -156,7 +165,7 @@ html[data-theme="light"] {
     outline: none;
 
     // Put the focus ring on the <a> element's ::after pseudo-element
-    &:after {
+    &::after {
       outline: $focus-ring-outline;
       border-radius: 0.25rem; // copied from Sphinx Design CSS for .sd-card
     }
@@ -166,6 +175,7 @@ html[data-theme="light"] {
     border-color: var(--pst-color-link-hover);
   }
 }
+
 /*******************************************************************************
   * tabs
   */
@@ -177,6 +187,7 @@ html[data-theme="light"] {
       border-style: solid solid none;
       border-color: var(--pst-color-primary) var(--pst-color-primary)
         transparent; // top LR bottom
+
       border-width: 0.125rem 0.125rem 0;
       border-radius: 0.125rem 0.125rem 0 0;
       background-color: var(--pst-color-on-background);
@@ -192,7 +203,7 @@ html[data-theme="light"] {
     }
 
     // Hover label
-    &:not(:checked):not(:focus-visible) + label:hover {
+    &:not(:checked, :focus-visible) + label:hover {
       border-color: transparent;
       color: var(--pst-color-secondary);
     }
@@ -202,7 +213,7 @@ html[data-theme="light"] {
   > label {
     color: var(--pst-color-on-surface);
     border: 0.125rem solid transparent;
-    border-radius: 0.125rem 0.125rem 0px 0px;
+    border-radius: 0.125rem 0.125rem 0 0;
     background-color: var(--pst-color-surface);
     padding: 0 0.75em;
     margin-inline-end: 0.25rem;
@@ -229,15 +240,18 @@ html[data-theme="light"] {
 
 details.sd-dropdown {
   // Remove all borders to over-ride SD behavior, and we'll add our own later
-  border: 0px !important;
+  border: 0 !important;
+
   summary.sd-card-header {
     border: 0 !important;
+
     & + div.sd-summary-content {
       border: 0;
     }
   }
+
   // Drop shadow should behave same as admonitions
-  @include box-shadow();
+  @include box-shadow;
 
   // Header is where the "clickable" box goes
   summary.sd-card-header {
@@ -253,13 +267,16 @@ details.sd-dropdown {
     // so that it is defined in both places
     --pst-sd-dropdown-color: var(--pst-gray-500);
     --pst-sd-dropdown-bg-color: var(--pst-color-surface);
+
     & + div.sd-summary-content {
       --pst-sd-dropdown-color: var(--sd-color-card-border);
     }
+
     @each $name in $sd-semantic-color-names {
       &.sd-bg-#{$name} {
         --pst-sd-dropdown-color: var(--sd-color-#{$name});
         --pst-sd-dropdown-bg-color: var(--sd-color-#{$name}-bg);
+
         // Otherwise it won't be defined in the sibling element
         & + div.sd-summary-content {
           --pst-sd-dropdown-color: var(--sd-color-#{$name});
@@ -273,19 +290,23 @@ details.sd-dropdown {
     }
 
     @include legacy-backdrop-placeholder;
+
     background-color: var(--pst-sd-dropdown-bg-color) !important;
 
     // Add a left border with the same structure as our admonitions
     border-left: 0.2rem solid var(--pst-sd-dropdown-color) !important;
+
     & + div.sd-summary-content {
       border-left: 0.2rem solid var(--pst-sd-dropdown-color) !important;
       border-bottom-left-radius: calc(0.25rem - 1px);
       background-color: var(--pst-color-on-background);
     }
+
     span.sd-summary-icon {
       display: inline-flex;
       align-items: center;
       color: var(--pst-sd-dropdown-color) !important;
+
       svg {
         opacity: 1;
       }
@@ -316,6 +337,7 @@ html {
 
     &:hover {
       @include link-style-hover; // override Sphinx Design
+
       text-decoration-thickness: 1px;
     }
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss
index 5013c0564..1508c99e8 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss
@@ -50,11 +50,12 @@
       // the left border on the container's children). This makes it complicated
       // to get the focus ring to simultaneously cover the left border in the
       // header and align perfectly on the right with the body.
-      .admonition-title:focus-within:before {
+      .admonition-title:focus-within::before {
         content: "";
         transform: translateX(
           -$admonition-left-border-width
         ); // align left edges of admonition and ring
+
         width: calc(100% + $admonition-left-border-width); // align right edges
         height: 100%;
         border: $focus-ring-outline;
@@ -62,7 +63,7 @@
       }
 
       // When expanded, sharpen the bottom left and right corners of the focus ring
-      &:not(.toggle-hidden) .admonition-title:focus-within:before {
+      &:not(.toggle-hidden) .admonition-title:focus-within::before {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
       }
diff --git a/src/pydata_sphinx_theme/assets/styles/pages/_search.scss b/src/pydata_sphinx_theme/assets/styles/pages/_search.scss
index fe25ba556..3a1c0bdcd 100644
--- a/src/pydata_sphinx_theme/assets/styles/pages/_search.scss
+++ b/src/pydata_sphinx_theme/assets/styles/pages/_search.scss
@@ -36,10 +36,10 @@
       div.context,
       p.context {
         color: var(--pst-color-text-base);
-        margin: 0.5em 0 0 0;
+        margin: 0.5em 0 0;
 
         // Add a # before page section titles to make it clear they are sections
-        a:before {
+        a::before {
           content: "#";
           padding-right: 0.2em;
           color: var(--pst-color-text-muted);
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss
index bdb3cef15..7ddca3109 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss
@@ -40,7 +40,7 @@
 
   // The "Switch to stable version" link (styled like a button)
   .pst-button-link-to-stable-version {
-    @include box-shadow();
+    @include box-shadow;
 
     $background-color: var(--pst-color-danger);
     $hover-background-color: var(--pst-color-danger-highlight);
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_article.scss b/src/pydata_sphinx_theme/assets/styles/sections/_article.scss
index 07bb0f378..cbe40ea17 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_article.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_article.scss
@@ -11,10 +11,12 @@
     display: flex;
     justify-content: center;
     height: 100%;
+
     .bd-article-container {
       justify-content: start;
       display: flex;
       flex-direction: column;
+
       // Max-width is slightly more than the W3 since our docs often have images.
       // We shoot for about 100 characters per line instead of 80.
       // ref: https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length
@@ -22,6 +24,7 @@
       max-width: 60em;
       overflow-x: auto; // Prevent wide content from pushing off the secondary sidebar
       padding: 1rem;
+
       .bd-article {
         // Give a bit more verticle spacing on wide screens
         @include media-breakpoint-up($breakpoint-sidebar-secondary) {
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_container.scss b/src/pydata_sphinx_theme/assets/styles/sections/_container.scss
index 442f442d1..82bc9a723 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_container.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_container.scss
@@ -10,6 +10,7 @@
 
 .bd-page-width {
   width: 100%;
+
   @include media-breakpoint-up(lg) {
     max-width: $breakpoint-page-width;
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
index 880a9adae..09c526e8a 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -15,11 +15,11 @@
   // Overrides bootstrap
   background-color: var(--pst-color-on-background) !important;
   box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);
-
   width: 100%;
   padding: 0;
   max-width: 100vw;
   justify-content: center;
+
   .bd-header__inner {
     display: flex;
     align-items: center;
@@ -44,6 +44,7 @@
   .navbar-header-items {
     display: none;
     flex-shrink: 1;
+
     @include media-breakpoint-up($breakpoint-sidebar-primary) {
       display: flex;
       flex-grow: 1;
@@ -57,6 +58,7 @@
     display: flex;
     align-items: center;
     flex-flow: wrap;
+
     // In case we wrap our items to multiple rows on small screens
     row-gap: 0;
   }
@@ -91,13 +93,16 @@
       margin-inline: 2px; // breathing room so hover and focus styles do not overlap
       &.dropdown {
         margin-inline: 4px;
+
         button {
           padding-inline: 8px;
         }
       }
+
       a {
         padding-inline: 6px;
       }
+
       @include header-link;
     }
 
@@ -131,7 +136,7 @@
           padding: 0.25rem 1.5rem;
 
           // Override Bootstrap
-          &:focus:not(:hover):not(:active) {
+          &:focus:not(:hover, :active) {
             background-color: inherit;
           }
 
@@ -164,7 +169,7 @@
   // Override Bootstrap
   transition: none;
 
-  &.nav-external:after {
+  &.nav-external::after {
     font: var(--fa-font-solid);
     content: var(--pst-icon-external-link);
     font-size: 0.75em;
@@ -202,6 +207,7 @@
 
     &.primary-toggle {
       margin-right: 1rem;
+
       @include media-breakpoint-up($breakpoint-sidebar-primary) {
         display: none;
       }
@@ -209,6 +215,7 @@
 
     &.secondary-toggle {
       margin-left: 1rem;
+
       @include media-breakpoint-up($breakpoint-sidebar-secondary) {
         display: none;
       }
@@ -218,6 +225,7 @@
   // Hide the navbar header items on mobile because they're in the sidebar
   .navbar-header-items {
     display: none;
+
     @include media-breakpoint-up($breakpoint-sidebar-primary) {
       display: inherit;
     }
@@ -227,6 +235,7 @@
 // THe elements next to the hamburger menu only show on narrow screens
 .navbar-persistent--mobile {
   margin-left: auto;
+
   @include media-breakpoint-up($breakpoint-sidebar-primary) {
     display: none;
   }
@@ -235,6 +244,7 @@
 // The navbar-persistent content should only show on wide screens
 .navbar-persistent--container {
   display: none;
+
   @include media-breakpoint-up($breakpoint-sidebar-primary) {
     display: flex;
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
index b461b451a..518b05b71 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
@@ -4,6 +4,7 @@
  */
 
 $sidebar-padding-right: 1rem;
+
 .bd-sidebar-primary {
   display: flex;
   flex-direction: column;
@@ -11,6 +12,7 @@ $sidebar-padding-right: 1rem;
   max-height: calc(100vh - var(--pst-header-height));
   position: sticky;
   top: var(--pst-header-height);
+
   @include make-col(3);
 
   // Borders padding and whitespace
@@ -18,8 +20,8 @@ $sidebar-padding-right: 1rem;
   border-right: 1px solid var(--pst-color-border);
   background-color: var(--pst-color-background);
   overflow-y: auto;
-
   font-size: var(--pst-sidebar-font-size-mobile);
+
   @include media-breakpoint-up($breakpoint-sidebar-primary) {
     font-size: var(--pst-sidebar-font-size);
   }
@@ -129,6 +131,7 @@ $sidebar-padding-right: 1rem;
   .sidebar-primary-items__start {
     // Add a border on mobile to separate it from the header sidebar area
     border-top: 1px solid var(--pst-color-border);
+
     @include media-breakpoint-up($breakpoint-sidebar-primary) {
       border-top: none;
     }
@@ -138,9 +141,10 @@ $sidebar-padding-right: 1rem;
     margin-top: auto;
     margin-bottom: 1em;
   }
+
   .list-caption {
     list-style: none;
-    padding-left: 0px;
+    padding-left: 0;
 
     // Level 0 TOC heading is put inside the <summary> tag
     // so let the <summary> tag take up more space
@@ -169,6 +173,7 @@ $sidebar-padding-right: 1rem;
       }
     }
   }
+
   li.has-children {
     $toctree-toggle-width: 30px;
 
@@ -179,6 +184,7 @@ $sidebar-padding-right: 1rem;
       margin-right: calc(
         $toctree-toggle-width + $focus-ring-width
       ); // keep clear of the toggle icon
+
       padding-top: 0.25rem; // align caption text with toggle chevron
     }
 
@@ -186,6 +192,7 @@ $sidebar-padding-right: 1rem;
       > summary {
         // Remove browser default toggle icon
         list-style: none;
+
         &::-webkit-details-marker {
           display: none;
         }
@@ -258,12 +265,14 @@ nav.bd-links {
   li > a {
     display: block;
     padding: 0.25rem 0.65rem;
+
     @include link-sidebar;
+
     box-shadow: none;
     margin-right: $focus-ring-width; // prevent the right side focus ring from disappearing under the sidebar right edge
 
     &.reference.external {
-      &:after {
+      &::after {
         font: var(--fa-font-solid);
         content: var(--pst-icon-external-link);
         font-size: 0.75em;
@@ -274,6 +283,7 @@ nav.bd-links {
 
   .current > a {
     @include link-sidebar-current;
+
     background-color: transparent;
   }
 
@@ -291,11 +301,13 @@ nav.bd-links {
     margin-top: 1.25rem;
     margin-bottom: 0.5rem;
     color: var(--pst-color-text-base);
+
     &:first-child {
       margin-top: 0;
     }
 
     font-size: var(--pst-sidebar-font-size-mobile);
+
     @include media-breakpoint-up($breakpoint-sidebar-primary) {
       font-size: var(--pst-sidebar-font-size);
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
index b29af317f..42354026f 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
@@ -10,9 +10,10 @@
   position: sticky;
   top: var(--pst-header-height);
   max-height: calc(100vh - var(--pst-header-height));
-  padding: 2rem 1rem 1rem 1rem;
+  padding: 2rem 1rem 1rem;
   width: var(--pst-sidebar-secondary);
   font-size: var(--pst-sidebar-font-size-mobile);
+
   @include media-breakpoint-up($breakpoint-sidebar-secondary) {
     font-size: var(--pst-sidebar-font-size);
   }
@@ -23,7 +24,8 @@
 }
 
 .sidebar-secondary-item {
-  padding: 0.5rem 0.5rem;
+  padding: 0.5rem;
+
   @include media-breakpoint-up($breakpoint-sidebar-secondary) {
     border-left: 1px solid var(--pst-color-border);
     padding-left: 1rem;
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss b/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss
index b82f94506..29d0755db 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss
@@ -19,6 +19,7 @@
   // This shows / hides the button
   transform: translateY(-100%);
   transition: transform 150ms ease-in-out;
+
   &:focus-within {
     transform: translateY(0%);
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss b/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss
index 914343a9a..b848eceb5 100644
--- a/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss
+++ b/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss
@@ -1,13 +1,11 @@
 // Override bootstrap variables
 $spacer: 1rem;
-
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
   xl: 1400px,
 );
-
 $grid-breakpoints: (
   xs: 0,
   sm: 540px,
@@ -15,19 +13,19 @@ $grid-breakpoints: (
   lg: 960px,
   xl: 1200px,
 );
-
 $dropdown-link-hover-bg: var(--pst-color-surface);
+
 // --pst-color-surface can also be assigned to the dark variant because it is
 // scoped to different values depending on light/dark theme
 $dropdown-dark-link-hover-bg: var(--pst-color-surface);
 $dropdown-link-active-bg: var(--pst-color-surface);
 $dropdown-dark-link-active-bg: var(--pst-color-surface);
-
 $focus-ring-width: 0.1875rem; // 3px at 100% zoom (0.1875 * 16px base font = 3px)
 $focus-ring-opacity: 1;
 $focus-ring-color: var(--pst-color-accent);
 $focus-ring-blur: 0;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
+
 // outline creates the same style of focus ring, it just uses CSS outline instead of box shadow
 $focus-ring-outline: $focus-ring-color solid $focus-ring-width;
 $btn-focus-box-shadow: $focus-ring-box-shadow;
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
index 66b0790fe..f681d0cf6 100644
--- a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -15,6 +15,7 @@
   @each $key in $keys {
     $map: map-get($map, $key);
   }
+
   @return $map;
 }
 
@@ -98,22 +99,26 @@ $color-palette: (
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 // 4.5 - is for text that is 14pt or less
 $min-contrast-ratio-4: 4.5;
+
 // 3 is for text that is 18pt or bold, or for non-text elements
 $min-contrast-ratio-3: 3;
 
 // Customize the light and dark text colors for use in our color contrast function.
 $foundation-black: #14181e;
-$foundation-white: #ffffff;
+$foundation-white: #fff;
+
 // This is a custom - calculated  color between gray 100 and 200 - to reduce
 // the contrast ratio (avoid a jarring effect)
 $base-light-text: #ced6dd;
+
 // used in sphinx_design - gray 100
 $foundation-light-gray: #f3f4f5;
+
 // used in sphinx_design - gray 700
 $foundation-muted-gray: #29313d;
+
 // used in sphinx_design - gray 800
 $foundation-dark-gray: #222832;
-
 $pst-semantic-colors: (
   "primary": (
     "light": #{map-deep-get($color-palette, "teal", "500")},
@@ -288,6 +293,7 @@ $pst-semantic-colors: (
     --pst-color-table-row-zebra-high-bg: var(--pst-color-on-background);
     --pst-color-table-row-zebra-low-bg: var(--pst-color-surface);
   }
+
   // adapt to light/dark-specific content
   @if $mode == "light" {
     .only-dark,
@@ -299,21 +305,24 @@ $pst-semantic-colors: (
     .only-light ~ figcaption {
       display: none !important;
     }
+
     /* Adjust images in dark mode (unless they have class .only-dark or
      * .dark-light, in which case assume they're already optimized for dark
      * mode).
      */
-    img:not(.only-dark):not(.dark-light) {
+    img:not(.only-dark, .dark-light) {
       filter: brightness(0.8) contrast(1.2);
     }
+
     /* Give images a light background in dark mode in case they have
     *  transparency and black text (unless they have class .only-dark or .dark-light, in
     *  which case assume they're already optimized for dark mode).
     */
-    .bd-content img:not(.only-dark):not(.dark-light) {
-      background-color: rgb(255, 255, 255);
+    .bd-content img:not(.only-dark, .dark-light) {
+      background-color: rgb(255 255 255);
       border-radius: 0.25rem;
     }
+
     // MathJax SVG outputs should be filled to same color as text.
     .MathJax_SVG * {
       fill: var(--pst-color-text-base);
@@ -332,6 +341,7 @@ html:not([data-theme]) {
 @each $mode in (light, dark) {
   html[data-theme="#{$mode}"] {
     @include theme-colors($mode);
+
     color-scheme: $mode;
   }
 }