[TASK] add input group element with interaction

frontend/scss/components/_btns.scss

@@ -28,4 +28,8 @@
   &[aria-pressed='true'] {
     @apply outline outline-2 outline-offset-2 outline-primary-600 bg-primary-100 text-primary-950;
   }
+
+  &-hidden {
+    @apply hidden;
+  }
 }

frontend/scss/components/_important.scss

@@ -2,3 +2,12 @@
     border-top-left-radius: 0px !important;
     border-top-right-radius: 0px !important;
 }
+
+.rounded-l-none-important {
+  border-bottom-left-radius: 0px !important;
+  border-top-left-radius: 0px !important;
+}
+
+.rounded-none-important {
+  border-radius: 0px !important;
+}

frontend/scss/components/_input.scss

@@ -2,6 +2,25 @@
   @apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
 
+.input-group {
+  @apply flex;
+
+  input[readonly] {
+    opacity: .7;
+  }
+
+  &.editable {
+      input[type="reset"],
+      input[type="submit"] {
+          @apply block;
+      }
+
+      button[type="button"] {
+          @apply hidden;
+      }
+  }
+}
+
 select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;