From 6aaed20b79ae95c164e111e9da73a4d9b6406361 Mon Sep 17 00:00:00 2001
From: andrey-canon <andrey.canon@edunext.co>
Date: Thu, 21 Nov 2024 15:57:49 -0500
Subject: [PATCH] fix: replace breakpoints with css variables

---
 .../sidebar/sidebars/discussions/Discussions.scss   |  2 +-
 src/index.scss                                      | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
index fe94248b26..350356f732 100644
--- a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
+++ b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
@@ -1,5 +1,5 @@
 .discussions-sidebar-frame {
-    @media (max-width: -1 + map-get($grid-breakpoints, "xl")) {
+    @media (--pgn-size-breakpoint-max-width-xl) {
         max-height: calc(100vh - 65px);
     }
 }
diff --git a/src/index.scss b/src/index.scss
index c8e6f261e5..40dc416eab 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -328,9 +328,9 @@
   max-width: 640px;
   margin: 0 auto;
 
-  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+  @media (--pgn-size-breakpoint-max-width-xs) {
     flex-direction: column;
-    gap: $spacer;
+    gap: var(--pgn-spacing-spacer-base);
   }
 
   .previous-button,
@@ -345,7 +345,7 @@
   .next-button {
     flex-basis: 75%;
 
-     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+     @media (--pgn-size-breakpoint-max-width-xs) {
        flex-basis: 100%;
      }
   }
@@ -353,7 +353,7 @@
   .previous-button {
     flex-basis: 25%;
 
-     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+     @media (--pgn-size-breakpoint-max-width-xs) {
        flex-basis: 100%;
      }
   }
@@ -365,7 +365,7 @@
 
   .next-button,
   .previous-button {
-    @media (min-width: map-get($grid-breakpoints, "md")) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       flex-basis: auto;
       min-width: 8rem;
     }
@@ -429,7 +429,6 @@
 
 // Import component-specific sass files
 @import "courseware/course/celebration/CelebrationModal.scss";
-@import "courseware/course/sidebar/sidebars/discussions/Discussions.scss";
 @import "courseware/course/sidebar/sidebars/notifications/NotificationIcon.scss";
 @import "courseware/course/sequence/lock-paywall/LockPaywall.scss";
 @import "shared/streak-celebration/StreakCelebrationModal.scss";
@@ -447,4 +446,4 @@
 @import "course-home/courseware-search/courseware-search.scss";
 @import "course-tabs/course-tabs-navigation.scss";
 @import "courseware/course/sidebar/common/SidebarBase.scss";
-@import "courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss";
+@import "courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss";
\ No newline at end of file