src/features/search/components/Searchbar.vue

@@ -3,4 +3,44 @@
         <input type="search" name="search" placeholder="Search..." required />
         <button type="submit" class="search-button">Search</button>
     </div>
-</template>
+</template>
+
+<style>
+.search-wrapper {
+    --submit-button-padding-y: 8px;
+    --submit-button-content-height: 18px;
+    --padding: 4px;
+    display: flex;
+    align-items: center;
+    width: 80%;
+    border: 1.5px solid #ccc;
+    box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
+    border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
+    padding: var(--padding);
+    padding-left: calc(var(--submit-button-content-height) + var(--padding));
+}
+
+.search-wrapper input {
+    border: none;
+    outline: none;
+    width: 100%;
+    font-size: 1rem;
+    background: transparent;
+}
+
+.search-button {
+    font-size: 1rem;
+    height: calc(var(--submit-button-content-height) + 2 * var(--submit-button-padding-y));
+    border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y));
+    border: none;
+    padding: var(--submit-button-padding-y) 20px;
+    background: #4562BE;
+    color: white;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.search-button:hover {
+    background: #374FA5;
+}
+</style>

src/styles/main.css

@@ -12,44 +12,6 @@ form {
     width: 100%;
 }
 
-.search-wrapper {
-    --submit-button-padding-y: 8px;
-    --submit-button-content-height: 18px;
-    --padding: 4px;
-    display: flex;
-    align-items: center;
-    width: 80%;
-    border: 1.5px solid #ccc;
-    box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
-    border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
-    padding: var(--padding);
-    padding-left: calc(var(--submit-button-content-height) + var(--padding));
-}
-
-.search-wrapper input {
-    border: none;
-    outline: none;
-    width: 100%;
-    font-size: 1rem;
-    background: transparent;
-}
-
-.search-button {
-    font-size: 1rem;
-    height: calc(var(--submit-button-content-height) + 2 * var(--submit-button-padding-y));
-    border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y));
-    border: none;
-    padding: var(--submit-button-padding-y) 20px;
-    background: #4562BE;
-    color: white;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.search-button:hover {
-    background: #374FA5;
-}
-
 footer{
     text-align: center;
     margin-top: 20px;