@ebay/skin 16.5.1 → 16.6.0

package/src/less/button/button.less

@@ -44,6 +44,11 @@ a.fake-btn--borderless[aria-disabled="true"] {
     border-color: transparent;
 }
 
+button.btn--borderless.btn--destructive,
+a.fake-btn--borderless.btn--destructive {
+    .color-token(btn-secondary-destructive-foreground-color, color-foreground-attention);
+}
+
 button.btn--slim,
 a.fake-btn--slim {
     height: @button-height-regular;

package/src/less/button/stories/destructive-button/borderless.stories.js

@@ -0,0 +1,4 @@
+export default { title: "Skin/Button/Destructive/Borderless" };
+
+export const base = () =>
+    '<button class="btn btn--borderless btn--destructive">Destructive Borderless Button</button>';

package/src/less/carousel/carousel.less

@@ -17,21 +17,31 @@
     .background-color-token(carousel-paddle-background-color, color-background-primary);
 
     &--prev {
-        left: 0;
+        left: -@spacing-200;
     }
 
     &--next {
-        right: 0;
+        right: -@spacing-200;
     }
 
+    // deprecated
     .icon--chevron-right-24 {
         margin-left: 2px;
     }
 
+    // deprecated
     .icon--chevron-left-24 {
         margin-left: -2px;
     }
 
+    .icon--chevron-right-12 {
+        margin-left: 1px;
+    }
+
+    .icon--chevron-left-12 {
+        margin-left: -1px;
+    }
+
     align-items: center;
     border: 1px solid;
     .border-color-token(carousel-paddle-border-color, color-stroke-subtle);
@@ -101,7 +111,6 @@
     position: relative;
 
     &__container {
-        overflow: hidden;
         position: relative;
         white-space: nowrap;
         width: 100%;
@@ -194,24 +203,37 @@ span.carousel__container {
 [dir="rtl"] {
     .carousel__control--prev {
         left: unset;
-        right: 0;
+        right: -@spacing-200;
     }
 
+    // deprecated
     .carousel__control .icon--chevron-left-24 {
         margin-left: 2px;
     }
 
+    .carousel__control .icon--chevron-left-12 {
+        margin-left: 1px;
+    }
+
     .carousel__control--next {
-        left: 0;
+        left: -@spacing-200;
         right: unset;
     }
 
+    // deprecated
     .carousel__control .icon--chevron-right-24 {
         margin-left: -2px;
     }
 
+    .carousel__control .icon--chevron-right-12 {
+        margin-left: -1px;
+    }
+
+    // deprecated (first two selectors only)
     .carousel__control .icon--chevron-left-24,
-    .carousel__control .icon--chevron-right-24 {
+    .carousel__control .icon--chevron-right-24,
+    .carousel__control .icon--chevron-left-12,
+    .carousel__control .icon--chevron-right-12 {
         transform: rotate(180deg);
     }
 }
@@ -224,6 +246,7 @@ span.carousel__container {
             (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
     ) {
     // always show paddles when scroll snapping and hover is not supported.
+    // todo: rename to .carousel--autoplay
     .carousel:not(.carousel__autoplay) .carousel__control {
         .show-control();
     }
@@ -245,6 +268,7 @@ span.carousel__container {
         (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
 ) {
     /* autoprefixer: off */
+    // todo: rename to .carousel--autoplay
     .carousel:not(.carousel__autoplay) {
         overflow: visible;
 
@@ -307,6 +331,7 @@ span.carousel__container {
     }
 }
 
+// todo: rename to .carousel--autoplay
 .carousel.carousel--hidden-scrollbar:not(.carousel__autoplay) {
     overflow: hidden;
 }
@@ -322,3 +347,13 @@ span.carousel__container {
 .carousel--hidden-scrollbar .carousel__container .carousel__list {
     padding-bottom: 80px;
 }
+
+// hidden-scrollbar must have inner paddle position due to overflow: hidden
+.carousel--hidden-scrollbar .carousel__control--prev {
+    left: 0;
+}
+
+// hidden-scrollbar must have inner paddle position due to overflow: hidden
+.carousel--hidden-scrollbar .carousel__control--next {
+    right: 0;
+}

package/src/less/carousel/stories/carousel.stories.js

@@ -4,8 +4,8 @@ export const continuous = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -21,8 +21,8 @@ export const continuous = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -33,25 +33,25 @@ export const imageTreatment = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
             <ul class="carousel__list carousel__list--image-treatment carousel__list--image-treatment-demo">
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
                 <li>Card 7</li>
                 <li>Card 8</li>
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -62,25 +62,25 @@ export const imageTreatmentLarge = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
             <ul class="carousel__list carousel__list--image-treatment-large carousel__list--image-treatment-demo">
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
-                <li><img src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/aztec-pyramid.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/falls.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/mountain.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/shoes.jpeg"/></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/tall-cat.jpeg" /></li>
+                <li><img src="https://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg"/></li>
                 <li>Card 7</li>
                 <li>Card 8</li>
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -94,8 +94,8 @@ export const slides = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false" >
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -111,8 +111,8 @@ export const slides = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -126,8 +126,8 @@ export const slideshow = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false" >
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -139,8 +139,8 @@ export const slideshow = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
@@ -160,8 +160,8 @@ export const RTL = () => `
                 <span>Top Products - Slide 1 of 4</span>
             </h4>
             <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                    <use href="#icon-chevron-left-24"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                    <use href="#icon-chevron-left-12"></use>
                 </svg>
             </button>
             <div class="carousel__viewport">
@@ -173,8 +173,8 @@ export const RTL = () => `
                 </ul>
             </div>
             <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false" >
-                    <use href="#icon-chevron-right-24"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false" >
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </button>
         </div>
@@ -191,8 +191,8 @@ export const hiddenScrollbar = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-24" focusable="false">
-                <use href="#icon-chevron-left-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -208,8 +208,135 @@ export const hiddenScrollbar = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-24" focusable="false">
-                <use href="#icon-chevron-right-24"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const continuousWithPaddlesVisible = () => `
+<div class="carousel">
+    <div class="carousel__container">
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport carousel__viewport--mask">
+            <ul class="carousel__list carousel__list--default-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+                <li>Card 5</li>
+                <li>Card 6</li>
+                <li>Card 7</li>
+                <li>Card 8</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const slidesWithPaddlesVisible = () => `
+<div class="carousel carousel--slides">
+    <div class="carousel__container">
+        <h4 class="clipped" aria-live="polite">
+            <span>Top Products - Slide 1 of 2</span>
+        </h4>
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport">
+            <ul class="carousel__list carousel__list--discrete-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+                <li>Card 5</li>
+                <li>Card 6</li>
+                <li>Card 7</li>
+                <li>Card 8</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const slideshowWithPaddlesVisible = () => `
+<div class="carousel carousel--slides">
+    <div class="carousel__container">
+        <h4 class="clipped" aria-live="polite">
+            <span>Top Products - Slide 1 of 4</span>
+        </h4>
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport">
+            <ul class="carousel__list carousel__list--slideshow-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </button>
+    </div>
+    <button class="carousel__playback" aria-label="Play - Top Products">
+        <svg class="icon icon--play-24" focusable="false" aria-hidden="true">
+            <use href="#icon-play-24"></use>
+        </svg>
+    </button>
+</div>
+`;
+
+/* paddle opacity set to 1 for purpose of visual regression testing only */
+export const hiddenScrollbarWithPaddlesVisible = () => `
+<div class="carousel carousel--hidden-scrollbar">
+    <div class="carousel__container">
+        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <use href="#icon-chevron-left-12"></use>
+            </svg>
+        </button>
+        <div class="carousel__viewport carousel__viewport--mask">
+            <ul class="carousel__list carousel__list--default-demo">
+                <li>Card 1</li>
+                <li>Card 2</li>
+                <li>Card 3</li>
+                <li>Card 4</li>
+                <li>Card 5</li>
+                <li>Card 6</li>
+                <li>Card 7</li>
+                <li>Card 8</li>
+            </ul>
+        </div>
+        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>

package/src/less/field/field.less

@@ -36,7 +36,7 @@ div.field--table {
 
 .field__description--group {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
 }
 
 .field__description--group > :last-child {

package/src/less/global/global.less

@@ -6,6 +6,7 @@ body {
     .color-token(color-foreground-primary);
     font-family: @font-family-default;
     font-size: @font-size-regular;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     -webkit-text-size-adjust: 100%;
 }
 

package/src/less/icon/generated/icon.less

@@ -111,6 +111,10 @@ svg.icon--arrows-3d-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--arrows-3d-filled-64-colored {
+    height: 64px;
+    width: 64px;
+}
 svg.icon--article-16 {
     height: 16px;
     width: 16px;
@@ -743,6 +747,14 @@ svg.icon--discord-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--discount-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--discount-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--discover-12-colored {
     height: 12px;
     width: 20px;
@@ -1715,6 +1727,10 @@ svg.icon--overflow-vertical-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--package-16 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--package-24 {
     height: 24px;
     width: 24px;
@@ -1823,6 +1839,10 @@ svg.icon--peso-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--phone-16 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--phone-24 {
     height: 24px;
     width: 24px;
@@ -1919,6 +1939,14 @@ svg.icon--progress-upcoming-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--promotion-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--promotion-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--qr-code-16 {
     height: 16px;
     width: 16px;
@@ -2119,6 +2147,10 @@ svg.icon--search-similar-20 {
     height: 20px;
     width: 20px;
 }
+svg.icon--search-similar-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--security-key-24 {
     height: 24px;
     width: 24px;

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -2,6 +2,11 @@
 @import "../mixins/private/dialog-mixins.less";
 @import "../mixins/private/token-mixins.less";
 
+:root {
+    --dialog-lightbox-wide-max-width: 896px;
+    --dialog-lightbox-narrow-max-width: 480px;
+}
+
 .lightbox-dialog[role="dialog"] {
     .lightbox-dialog-base();
 }
@@ -54,6 +59,7 @@
 
 // inherits from .icon-btn
 // Might need to see if icon-btn can support a small version
+button.icon-btn.lightbox-dialog__prev,
 button.icon-btn.lightbox-dialog__close {
     align-self: center;
     border: 0;
@@ -64,11 +70,20 @@ button.icon-btn.lightbox-dialog__close {
     z-index: 1;
 }
 
+button.icon-btn.lightbox-dialog__prev {
+    margin-right: 16px;
+}
+
+.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev,
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close {
     align-self: self-start;
     margin: 0;
 }
 
+.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {
+    margin-left: -32px;
+}
+
 .lightbox-dialog__title {
     &:not(:first-child) {
         margin-left: @spacing-200;
@@ -126,12 +141,25 @@ button.icon-btn.lightbox-dialog__close {
     }
 }
 
+[dir="rtl"] {
+    button.icon-btn.lightbox-dialog__prev {
+        margin-left: 16px;
+        margin-right: 0;
+    }
+    button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
+        transform: rotate(180deg);
+    }
+}
 // In order to prevent the margins to meet the ege of the page at medium screen sizes
 @media (min-width: @_screen-size-SM) {
     .lightbox-dialog__window {
         max-width: calc(88% - @spacing-400);
     }
 
+    .lightbox-dialog--narrow .lightbox-dialog__window {
+        max-width: var(--dialog-lightbox-narrow-max-width);
+    }
+
     .lightbox-dialog__window .lightbox-dialog__footer {
         .dialog-footer-content-large();
     }