From dac3c00152d937d8619273047cf2bc8d586d89ba Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 28 Jul 2023 11:50:43 +0700
Subject: [PATCH] Refactor code

---
 .../practice-02/src/styles/layouts/_menu.scss | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/practice/practice-02/src/styles/layouts/_menu.scss b/practice/practice-02/src/styles/layouts/_menu.scss
index 4dbd4cc..fbe6dd1 100644
--- a/practice/practice-02/src/styles/layouts/_menu.scss
+++ b/practice/practice-02/src/styles/layouts/_menu.scss
@@ -1,16 +1,28 @@
+%mr-inline-auto {
+  margin-inline: auto;
+}
+
+%style-category-item {
+  font-size: $fs-md;
+  padding: 8px 18px;
+  border-radius: 50px;
+}
+
 .menu {
   &__container {
+    @extend %mr-inline-auto;
+
     padding-top: 150px;
     max-width: 424px;
-    margin-inline: auto;
   }
 
   &__heading {
+    @extend %mr-inline-auto;
+
     font-size: $fs-x-lg;
     font-weight: 700;
     text-align: center;
     max-width: 363px;
-    margin-inline: auto;
   }
 
   &__list-category {
@@ -29,21 +41,19 @@
   }
 
   &__category-item:focus {
-    font-size: $fs-md;
+    @extend %style-category-item;
+
     color: $white;
     background-color: $primary-color;
     border: 2px solid $primary-color;
-    padding: 8px 18px;
-    border-radius: 50px;
   }
 
   &__category-item {
-    font-size: $fs-md;
+    @extend %style-category-item;
+
     color: $gray;
     background-color: transparent;
     border: 2px solid $black;
-    padding: 8px 18px;
-    border-radius: 50px;
   }
 
   &__card-list {