Change input style

src/styles/globals.css

@@ -60,7 +60,8 @@ body {
   --col9: rgb(156, 144, 168);
 }
 
-.button {
+.button,
+.input-field {
   @apply rounded-md cursor-pointer text-[16px] py-1 px-2 transition-colors border;
 }
 
@@ -80,6 +81,18 @@ body {
   @apply bg-(--col4) border-(--col6) hover:bg-(--col6) hover:border-(--col8) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col7) disabled:hover:text-gray-100 disabled:hover:bg-(--col4) disabled:hover:border-(--col8);
 }
 
+.input-field.btntheme1 {
+  @apply focus:bg-(--col4) focus:border-(--col6);
+}
+
+.input-field.btntheme2 {
+  @apply focus:bg-(--col5) focus:border-(--col7);
+}
+
+.input-field.btntheme3 {
+  @apply focus:bg-(--col6) focus:border-(--col8);
+}
+
 ::-webkit-scrollbar {
   @apply w-2;
 }
@@ -138,10 +151,6 @@ body {
   @apply outline-none;
 }
 
-.input-field {
-  @apply border-2 border-(--col4) rounded-md bg-(--col2) py-1 px-2 focus:bg-(--col3) focus:border-(--col6) transition-colors w-full;
-}
-
 .entry-info-item {
   @apply flex flex-row items-center gap-1 border text-gray-300 py-1 px-2 rounded-md w-fit text-[16px] transition-colors cursor-pointer;
 }