feat: refactor cart item and cart components for improved layout and styling

src/app/shared/components/cart/cart.component.scss

@@ -5,102 +5,57 @@
   height: 100%;
 }
 
-.cart {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  width: 100%;
-  height: 100%;
-  color: #666666;
-  border-radius: 0;
-  overflow: hidden;
+.cart-header {
+  padding: 12px 8px 0 24px;
+}
 
-  &__header,
-  &__summary {
-    background-color: inherit;
-  }
+.cart-title {
+  color: #a0a0a0;
+  font-size: 13px;
+  letter-spacing: 0.04em;
+}
 
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 8px 0 24px;
-  }
+.cart-close-btn {
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  color: #a0a0a0;
+}
 
-  &__title {
-    margin: 0;
-    color: #a0a0a0;
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-  }
+.cart-items-container {
+  min-height: 0;
+  padding: 0 0 0 24px;
+  scrollbar-color: #d5d5d5 transparent;
+  scrollbar-width: thin;
 
-  &__close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: #a0a0a0;
-    font-size: 14px;
-  }
-
-  &__items {
-    display: grid;
-    gap: 8px;
-    min-height: 0;
-    padding: 0 0 0 24px;
-    overflow-y: auto;
-    scrollbar-color: #d5d5d5 transparent;
-    scrollbar-width: thin;
-  }
-
-  &__items::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 6px;
   }
 
-  &__items::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border-radius: 999px;
     background-color: #d5d5d5;
   }
-
-  &__summary {
-    display: grid;
-    gap: 0.35rem;
-    padding: 8px 22px 14px 24px;
-  }
-
-  &__summary-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1rem;
-  }
-
-  &__summary-label,
-  &__summary-value {
-    color: #a0a0a0;
-    font-size: 13px;
-  }
-
-  &__summary-label {
-    font-weight: 325;
-  }
-
-  &__summary-value {
-    font-weight: 700;
-  }
-
-  &__summary-row--total {
-    margin-top: 0.2rem;
-  }
-
-  &__summary-row--total .cart__summary-label,
-  &__summary-row--total .cart__summary-value {
-    color: #666666;
-    font-size: 15px;
-    font-weight: 700;
-  }
+}
+
+.cart-footer {
+  padding: 8px 22px 14px 24px;
+}
+
+.cart-summary-text-muted {
+  color: #a0a0a0;
+  font-size: 13px;
+  font-weight: 325;
+}
+
+.cart-summary-text-muted-bold {
+  color: #a0a0a0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.cart-total-text {
+  color: #666666;
+  font-size: 15px;
+  font-weight: 700;
 }