[CCUBE-1629][MAHI]Migrate toggle composite section with design and lo…

…gic changes
LifeSG · Dec 3, 2024 · 6c0a06e · 6c0a06e
1 parent 629b527
commit 6c0a06e
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/toggle/toggle.styles.tsx b/src/toggle/toggle.styles.tsx
@@ -78,7 +78,7 @@ export const Container = styled.div<ContainerStyleProps>`
             case "no-border": {
                 if (props.$error) {
                     return css`
-                        border-color: ${Colour["border-error-strong"]};
+                        border-color: ${Colour["border-error"]};
                     `;
                 }
 
@@ -118,7 +118,11 @@ export const Container = styled.div<ContainerStyleProps>`
             default: {
                 if (props.$error) {
                     return css`
-                        border-color: ${Colour["border-error-strong"]};
+                        border-color: ${Colour["border-error"]};
+
+                        &:has(${HeaderContainer}:hover) {
+                            background: ${Colour["bg-hover-subtle"]};
+                        }
                     `;
                 }
 
@@ -141,8 +145,7 @@ export const Container = styled.div<ContainerStyleProps>`
                         border-color: ${Colour["border-selected"]};
                         background: ${Colour["bg-selected"]};
 
-                        :hover {
-                            border-color: ${Colour["border-selected-hover"]};
+                        &:has(${HeaderContainer}:hover) {
                             background: ${Colour["bg-selected-hover"]};
                         }
                     `;
@@ -151,8 +154,7 @@ export const Container = styled.div<ContainerStyleProps>`
                 return css`
                     border-color: ${Colour.border};
 
-                    :hover {
-                        border-color: ${Colour.border};
+                    &:has(${HeaderContainer}:hover) {
                         background: ${Colour["bg-hover-subtle"]};
                     }
                 `;