🔥 Finish Cart implementation

- Use Select component in CartItem to change quantity
- Visual update when removing or changing an item quantity
- API: Remove Cart item action
- API: Handle Cart item adding and updating (quantity)

src/style/molecules/_cart-item.scss

@@ -1,11 +1,14 @@
 // Cart item
 .cart-item {
+    position: relative;
     display: flex;
-    background-color: #fff;
-    color: $color-gray;
-    margin-bottom: 24px;
-    border-radius: 6px;
     align-items: center;
+    margin-bottom: 24px;
+    background: #fff;
+    color: $color-gray;
+    border-radius: 6px;
+    overflow: hidden;
+    transition: opacity 0.3s var(--ease-quart);
 
     &:last-child {
         margin-bottom: 0;
@@ -13,14 +16,14 @@
 
     // Left Image
     &__left {
-        margin-right: 20px;
         width: 100px;
         height: 150px;
+        margin-right: 20px;
 
         @include bp (sm) {
-            margin-right: 32px;
             width: 124px;
             height: 180px;
+            margin-right: 32px;
         }
 
         img {
@@ -32,7 +35,11 @@
         }
     }
 
+    // Details
     &__right {
+        display: flex;
+        flex-direction: column;
+
         // Poster Title
         h3 {
             font-family: $font-serif;
@@ -45,14 +52,71 @@
         }
         // Text
         p {
-            font-size: rem(12px);
-            line-height: 1.4;
             max-width: 124px;
             margin: 8px 0 20px;
+            font-size: rem(12px);
+            line-height: 1.4;
 
             @include bp (sm) {
                 font-size: rem(13px);
             }
         }
+        // Select
+        .select {
+            position: relative;
+            display: flex;
+            align-items: center;
+            height: 28px;
+            margin-right: auto;
+            padding: 0 12px;
+            border: 1px solid rgba($color-lightgray, 0.3);
+            border-radius: 100vh;
+            cursor: pointer;
+            transition: border-color 0.4s var(--ease-quart);
+
+            span {
+                display: block;
+                font-size: rem(12px);
+                color: $color-text;
+
+                & + span {
+                    margin-left: 4px;
+                }
+            }
+            select {
+                position: absolute;
+                z-index: 1;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                opacity: 0;
+                cursor: pointer;
+                text-align: center;
+            }
+            &:after {
+                content: "";
+                display: block;
+                width: 8px;
+                height: 5px;
+                margin-left: 4px;
+                color: red;
+                background: url('data:image/svg+xml; utf8, <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">\
+                    <path d="m1 1 3 3 3-3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>\
+                </svg>');
+            }
+
+            // Hover
+            &:hover {
+                border-color: $color-secondary-light;
+            }
+        }
+
+        // Remove Icon
+        .remove {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+        }
     }
 }