🎨 styles: cart drawer

:%s

src/components/common/CarouselCommon/CarouselCommon.module.scss

@@ -8,6 +8,7 @@
   :global(.customArrow) {
     width: 64px;
     height: 64px;
+	border-radius: .8rem;
     &:focus {
       outline: none;
     }

src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss

@@ -4,6 +4,7 @@
     @apply flex bg-info;
     padding: 1.2rem 1.6rem;
     .text {
+        color: var(--white);
         font-weight: bold;
         margin-right: 0.8rem;
     }

src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss

@@ -12,6 +12,7 @@
     .productCardWarpper {
         padding-left: 1.6rem;
         :global(.customArrow) {
+            @apply bg-line;
             @screen lg {
                 &:global(.leftArrow) {
                     left: calc(-6.4rem - 2rem);

src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx

@@ -10,7 +10,7 @@ const ProductsInCart = ({ data }: Props) => {
   return (
     <ul className={s.productsInCart}>
       {
-        data.map(item => <li key={item.name}>
+        data.slice(0,1).map(item => <li key={item.name}>
           <ProductCartItem
             name={item.name}
             slug={item.slug}

src/components/common/DrawerCommon/DrawerCommon.module.scss

@@ -9,19 +9,15 @@
     width: 90%;
     box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
     z-index: 20000;
-    @screen md {
-        width: unset;
-    }
 
     .inner {
         @apply flex flex-col bg-white;
         width: fit-content;
         height: 100vh;
-        min-width: 48rem;
         width: 100%;
         margin-right: 0;
         @screen md {
-            max-width: 50rem;
+            max-width: 55rem;
         }
         .top {
             @apply flex justify-between items-center;
@@ -46,4 +42,11 @@
     &.hide {
         transform: translateX(110%);
     }
+
+    @screen md {
+        width: unset;
+        .inner {
+            min-width: 48rem;
+        }
+    }
 }