From cc622c333ba69f85e314ff2bd7a1e25c2611f58f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 18 Jul 2024 11:43:05 +0200
Subject: [PATCH] Feat(web): Add responsive variants to breakout-container
 helper #DS-1386

---
 .../src/scss/helpers/breakout/_breakout.scss  | 36 +++++++++++++++++--
 .../web/src/scss/helpers/breakout/index.html  |  8 +++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/scss/helpers/breakout/_breakout.scss b/packages/web/src/scss/helpers/breakout/_breakout.scss
index a71624993c..9644949ef9 100644
--- a/packages/web/src/scss/helpers/breakout/_breakout.scss
+++ b/packages/web/src/scss/helpers/breakout/_breakout.scss
@@ -1,3 +1,35 @@
-.breakout-container {
-    margin-inline: calc(-1 * var(--container-padding-inline));
+@use 'sass:map';
+@use '@tokens' as tokens;
+@use '../../tools/breakpoint';
+
+@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
+    $suffix: breakpoint.get-modifier('suffix', $breakpoint-name, $breakpoint-value);
+
+    @include breakpoint.up($breakpoint-value) {
+        .breakout-container#{$suffix} {
+            margin-inline: calc(-1 * var(--container-padding-inline));
+        }
+    }
+}
+
+$previous-breakpoint: (
+    name: '',
+    value: 0,
+);
+
+@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
+    @if map.get($previous-breakpoint, name) != '' {
+        @include breakpoint.up(map.get($previous-breakpoint, value)) {
+            @include breakpoint.down($breakpoint-value) {
+                .breakout-container-#{map.get($previous-breakpoint, name)}-only {
+                    margin-inline: calc(-1 * var(--container-padding-inline));
+                }
+            }
+        }
+    }
+
+    $previous-breakpoint: (
+        name: $breakpoint-name,
+        value: $breakpoint-value,
+    );
 }
diff --git a/packages/web/src/scss/helpers/breakout/index.html b/packages/web/src/scss/helpers/breakout/index.html
index 450cea6c85..07bbc6db93 100644
--- a/packages/web/src/scss/helpers/breakout/index.html
+++ b/packages/web/src/scss/helpers/breakout/index.html
@@ -8,6 +8,14 @@ <h2 class="docs-Heading">Breakout</h2>
 
     <div class="breakout-container docs-Box">Break out of Container</div>
 
+    <div class="breakout-container-tablet docs-Box">Break out of Container from Tablet</div>
+
+    <div class="breakout-container-desktop docs-Box">Break out of Container from Desktop</div>
+
+    <div class="breakout-container-mobile-only docs-Box">Break out of Container only on Mobile</div>
+
+    <div class="breakout-container-tablet-only docs-Box">Break out of Container only on Tablet</div>
+
   </div>
 
 </section>