Implement new css.Build.

assets/css/components/_pager.css

@@ -3,55 +3,53 @@
 Paged navigation is a list of page numbers when more than 1 page of content
 is available. */
 
-@layer components {
-  .pagination,
-  .pager {
-    --flex-inline-gap: .5rem;
+.pagination,
+.pager {
+  --flex-inline-gap: .5rem;
 
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--flex-inline-gap);
-    padding: 0;
-    text-align: start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--flex-inline-gap);
+  padding: 0;
+  text-align: start;
 
-    /* Add vertical rhythm margins. */
-    margin-block: var(--spacing-m);
-    justify-content: center;
+  /* Add vertical rhythm margins. */
+  margin-block: var(--spacing-m);
+  justify-content: center;
 
-    a {
-      text-decoration: none;
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  .pager__item,
+  .page-link {
+    padding-inline: 2px;
+  }
+
+  .page-item {
+  }
+
+  .active {
+    font-weight: var(--fw-bold);
+  }
+
+  .disabled {
+    .page-link {
+      /* Re-set default cursor for disabled elements. */
+      cursor: default;
+      color: var(--color-button-disabled);
 
       &:hover,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-
-    .pager__item,
-    .page-link {
-      padding-inline: 2px;
-    }
-
-    .page-item {
-    }
-
-    .active {
-      font-weight: var(--fw-bold);
-    }
-
-    .disabled {
-      .page-link {
-        /* Re-set default cursor for disabled elements. */
-        cursor: default;
+      &:focus,
+      &:active {
+        /* Override any link underlines and color changes. */
         color: var(--color-button-disabled);
-
-        &:hover,
-        &:focus,
-        &:active {
-          /* Override any link underlines and color changes. */
-          color: var(--color-button-disabled);
-          text-decoration: none;
-        }
+        text-decoration: none;
       }
     }
   }