Aprovechando scss para simplificar el codigo

Aprovecho que se pueden poner selectores dentro de selectores para
transformarlos en una especie de arbol de propiedades css :3

Es para lo unico que uso scss XD

src/styles/main.scss

@@ -10,8 +10,7 @@
   --accent: hsl(354, 81%, 56%);
 }
 
-
+/* Modificación básica de elementos*/
-/*Modificacion basica de elementos*/
 body {
   max-width: 75rem;
   margin: 0 auto;
@@ -28,33 +27,30 @@ input {
 
 button {
   border: 1px var(--gray-2) solid;
-}
 
-button.link {
+  &.link {
     display: inline;
     border: none;
     background-color: inherit;
     padding: 0;
     cursor: pointer;
   }
+}
 
 a, button.link {
   color: var(--accent);
   text-decoration: none;
-}
 
-a:hover, button.link:hover {
+  &:hover {
     text-decoration: underline;
   }
+}
 
 h1, h2, h3, h4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
-img {
-}
-
 /* Navbar */
 .nav {
   display: flex;
@@ -62,66 +58,62 @@ img {
   position: relative;
   justify-content: space-between;
   align-items: center;
-}
 
-.nav .branding {
+  .branding {
     margin: 0;
   }
 
   .nav-links {
     display: flex;
-}
 
-.nav-links .link {
+    .link {
       margin-left: 1rem;
     }
+  }
+}
 
 /* Pagination */
 ul.pagination {
   display: flex;
   margin: 1rem auto;
   justify-content: center;
-}
 
   .page-item {
     border: 1px solid var(--gray-2);
+
+    &.active {
+      background-color: var(--accent);
+
+      a {
+        color: white;
+      }
+    }
   }
 
   .page-link {
     color: var(--black);
     text-decoration: none;
     padding: 0 1rem;
-}
 
     @media (max-width: 767px) {
-  .page-link {
       padding: 0 .4rem;
     }
   }
-
-.page-item.active {
-  background-color: var(--accent);
 }
 
-.page-item.active a {
-  color: white;
-}
-
-
 /* Input with icon */
 .input-with-icon {
   display: flex;
-}
 
-.input-with-icon input {
+  input {
     border-right: none;
   }
 
-.input-with-icon button {
+  button {
     border-left: none;
     background: white;
   }
-
+}
 
 /* Lista de entidades */
 ul.entity_list {
@@ -200,28 +192,27 @@ ul.entity_list {
   }
 }
 
-
 /* Tabs */
 ul.tabs {
   display: flex;
   align-items: stretch;
   border-bottom: 2px var(--gray-1) solid;
   margin: 1rem 0;
-}
 
-ul.tabs li.tab {
+  li.tab {
     padding: .5rem 1rem;
     margin-bottom: -2px;
     cursor: pointer;
-}
 
-ul.tabs li.tab:hover {
+    &:hover {
       border-bottom: 2px var(--gray-2) solid;
     }
 
-ul.tabs li.tab.selected {
+    &.selected {
       border-bottom: 2px var(--accent) solid;
     }
+  }
+}
 
 /* Utils */
 .full-width {
@@ -232,9 +223,13 @@ ul.tabs li.tab.selected {
   animation: pulsating 1s infinite alternate ease-in-out;
 
   @keyframes pulsating {
-    from { background-color: var(--white);}
+    from {
+      background-color: var(--white);
+    }
 
-    to { background-color: var(--gray-2);}
+    to {
+      background-color: var(--gray-2);
+    }
   }
 }