feat: move all css to includes dir

src/includes/css/blocks/button.css

@@ -0,0 +1,102 @@
+.button {
+  align-items: center;
+  color: var(--color-text);
+  display: inline-flex;
+  gap: var(--spacing-0\.5);
+  padding: var(--spacing-0\.5) var(--spacing-1);
+  position: relative;
+  text-decoration: none;
+  transition: transform 0.3s var(--transition-bounce);
+  z-index: 1;
+
+  &::before,
+  &::after {
+    border-radius: var(--spacing-0\.5);
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition:
+      opacity 0.1s ease,
+      transform 0.3s var(--transition-bounce);
+    z-index: -1;
+  }
+
+  &::before {
+    background-color: var(--color-surface);
+  }
+
+  &::after {
+    background-color: var(--color-text);
+    opacity: 0;
+  }
+
+  svg {
+    color: var(--color-fadeText);
+    transform: scale(1);
+    transition: transform 0.3s var(--transition-bounce);
+  }
+}
+
+@media (hover: hover) {
+  .button:not(:active):hover {
+    &::before,
+    &::after {
+      transform: scale(1.05);
+    }
+
+    &::after {
+      opacity: 1;
+    }
+
+    svg {
+      color: var(--color-shadow);
+      transform: rotateZ(10deg) scale(1.25);
+    }
+  }
+}
+
+.button:active {
+  transform: scale(0.95);
+}
+
+.button--alt {
+  color: var(--color-primary);
+
+  &::before {
+    background-color: var(--color-white);
+  }
+
+  &::after {
+    background-color: color-mix(
+      in srgb,
+      var(--color-white) 90%,
+      var(--color-primary)
+    );
+  }
+
+  svg {
+    color: inherit;
+  }
+}
+
+@media (hover: hover) {
+  .button--alt:hover {
+    color: var(--color-shadow);
+
+    svg {
+      color: inherit;
+    }
+  }
+}
+
+.button__count {
+  color: var(--color-fadeText);
+}
+
+@media (hover: hover) {
+  .button:hover {
+    .button__count {
+      color: var(--color-border);
+    }
+  }
+}