From cac7938565eafb9df6633fb3cb4ff433e1f608c0 Mon Sep 17 00:00:00 2001
From: Donatas <contactdonatas@gmail.com>
Date: Wed, 27 Sep 2023 15:04:54 +0300
Subject: [PATCH] feat: add `:focus-within` style to `.input` (#2363)

* apply input focus styles to the :focus-inner selector

* apply :focus-within to input
---
 src/components/styled/input.css | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/styled/input.css b/src/components/styled/input.css
index 9d3c2785e5e..ec3c1e355b1 100644
--- a/src/components/styled/input.css
+++ b/src/components/styled/input.css
@@ -6,55 +6,64 @@
   &-bordered {
     @apply border-opacity-20;
   }
-  &:focus {
+  &:focus,
+  &:focus-within {
     @apply outline-base-content/20 outline outline-2 outline-offset-2;
   }
   &-ghost {
     @apply bg-opacity-5;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply text-base-content bg-opacity-100;
       box-shadow: none;
     }
   }
   &-primary {
     @apply border-primary;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply outline-primary;
     }
   }
   &-secondary {
     @apply border-secondary;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply outline-secondary;
     }
   }
   &-accent {
     @apply border-accent;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply outline-accent;
     }
   }
   &-info {
     @apply border-info;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply outline-info;
     }
   }
   &-success {
     @apply border-success;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply outline-success;
     }
   }
   &-warning {
     @apply border-warning;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply outline-warning;
     }
   }
   &-error {
     @apply border-error;
-    &:focus {
+    &:focus,
+    &:focus-within {
       @apply outline-error;
     }
   }