chore: replace @import with @use

Author: lucaslarroche

css/pico.classless.css

@@ -1,3 +1,5 @@
+@use "../settings";
+
 /**
  * Accordion (<details>)
  */
@@ -17,7 +19,7 @@ details {
       color: var(--accordion-close-summary-color);
     }
 
-    @if $enable-transitions {
+    @if settings.$enable-transitions {
       transition: color var(--transition);
     }
 
@@ -48,7 +50,7 @@ details {
       background-repeat: no-repeat;
       content: "";
 
-      @if $enable-transitions {
+      @if settings.$enable-transitions {
         transition: transform var(--transition);
       }
     }
@@ -72,7 +74,7 @@ details {
         background-image: var(--icon-chevron-button);
       }
 
-      @if $enable-classes {
+      @if settings.$enable-classes {
         // .contrast
         &:not(.outline).contrast {
           // Marker

css/pico.classless.css.map

@@ -1,3 +1,5 @@
+@use "../settings";
+
 /**
  * Dropdown ([role="list"])
  */
@@ -99,7 +101,7 @@ details[role="list"] {
       line-height: inherit;
       cursor: pointer;
 
-      @if $enable-transitions {
+      @if settings.$enable-transitions {
         transition: background-color var(--transition), border-color var(--transition),
           color var(--transition), box-shadow var(--transition);
       }

css/pico.classless.min.css

@@ -1,3 +1,5 @@
+@use "../settings";
+
 /**
  * Modal (<dialog>)
  */
@@ -31,15 +33,15 @@ dialog {
     max-height: calc(100vh - var(--spacing) * 2);
     overflow: auto;
 
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        max-width: map-get($viewports, "sm");
+    @if map-get(settings.$breakpoints, "sm") {
+      @media (min-width: map-get(settings.$breakpoints, "sm")) {
+        max-width: map-get(settings.$viewports, "sm");
       }
     }
 
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        max-width: map-get($viewports, "md");
+    @if map-get(settings.$breakpoints, "md") {
+      @media (min-width: map-get(settings.$breakpoints, "md")) {
+        max-width: map-get(settings.$viewports, "md");
       }
     }
 
@@ -75,7 +77,7 @@ dialog {
     }
 
     // Close icon
-    @if $enable-classes {
+    @if settings.$enable-classes {
       .close {
         display: block;
         width: 1rem;
@@ -89,7 +91,7 @@ dialog {
         background-repeat: no-repeat;
         opacity: 0.5;
 
-        @if $enable-transitions {
+        @if settings.$enable-transitions {
           transition: opacity var(--transition);
         }
 
@@ -108,7 +110,7 @@ dialog {
 }
 
 // Utilities
-@if $enable-classes {
+@if settings.$enable-classes {
   .modal-is-open {
     padding-right: var(--scrollbar-width, 0px);
     overflow: hidden;
@@ -121,7 +123,7 @@ dialog {
 }
 
 // Animations
-@if ($enable-classes and $enable-transitions) {
+@if (settings.$enable-classes and settings.$enable-transitions) {
   $animation-duration: 0.2s;
 
   :where(.modal-is-opening, .modal-is-closing) {

css/pico.css

@@ -1,3 +1,5 @@
+@use "../settings";
+
 /**
  * Tooltip ([data-tooltip])
  */
@@ -109,7 +111,7 @@
     }
   }
 
-  @if $enable-transitions {
+  @if settings.$enable-transitions {
     // Animations, excluding touch devices
     @media (hover: hover) and (pointer: fine) {
       &[data-placement="bottom"]:focus,

css/pico.css.map

@@ -1,3 +1,5 @@
+@use "../settings";
+
 /**
  * Button
  */
@@ -61,7 +63,7 @@ input[type="reset"],
   text-align: center;
   cursor: pointer;
 
-  @if $enable-transitions {
+  @if settings.$enable-transitions {
     transition: background-color var(--transition), border-color var(--transition),
       color var(--transition), box-shadow var(--transition);
   }
@@ -80,7 +82,7 @@ input[type="reset"],
 }
 
 // .secondary, .contrast & .outline
-@if $enable-classes {
+@if settings.$enable-classes {
   // Secondary
   :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
   input[type="reset"] {