Improve carouselStyled

Author: Hector Arce De Las Heras

src/components/carousel/carousel.styled.ts

@@ -116,20 +116,6 @@ export const PageControlAutomateContainerStyled = styled.div<{
 export const ArrowLeftIconContainer = styled.div<{
   styles: CarouselPropsStylesType;
 }>`
-  ${({ styles }) => getStyles(styles[CarouselArrowStateType.DEFAULT]?.arrowLeftIconContainer)};
-  &:hover {
-    ${props => getStyles(props.styles[CarouselArrowStateType.HOVER]?.arrowLeftIconContainer)}
-  }
-  &:active {
-    ${props => getStyles(props.styles[CarouselArrowStateType.PRESSED]?.arrowLeftIconContainer)}
-  }
-  &[data-disabled='true'] {
-    ${({ styles }) => getStyles(styles[CarouselArrowStateType.DISABLED]?.arrowLeftIconContainer)};
-    > button {
-      ${({ styles }) =>
-        getStyles(styles[CarouselArrowStateType.DISABLED]?.arrowLeftIconButtonContainer)};
-    }
-  }
   > button {
     position: absolute;
     top: 0;
@@ -148,6 +134,20 @@ export const ArrowLeftIconContainer = styled.div<{
         getStyles(props.styles[CarouselArrowStateType.PRESSED]?.arrowLeftIconButtonContainer)}
     }
   }
+  ${({ styles }) => getStyles(styles[CarouselArrowStateType.DEFAULT]?.arrowLeftIconContainer)};
+  &:hover {
+    ${props => getStyles(props.styles[CarouselArrowStateType.HOVER]?.arrowLeftIconContainer)}
+  }
+  &:active {
+    ${props => getStyles(props.styles[CarouselArrowStateType.PRESSED]?.arrowLeftIconContainer)}
+  }
+  &[data-disabled='true'] {
+    ${({ styles }) => getStyles(styles[CarouselArrowStateType.DISABLED]?.arrowLeftIconContainer)};
+    > button {
+      ${({ styles }) =>
+        getStyles(styles[CarouselArrowStateType.DISABLED]?.arrowLeftIconButtonContainer)};
+    }
+  }
 `;
 
 export const ArrowRightIconContainer = styled.div<{