feat(modal): allow close icon to be inside header for small modals

On larger screens an existing close icon of a modal is always displayed outside of the modal itself.
Only when using fullscreen it is put directly into the header by default.

To make this behavior possible for small modals on large screens as well i invented an optional class inside which can be added to the close icon

src/definitions/modules/modal.less

@@ -442,7 +442,7 @@
   }
 }
 
-& when (@variationModalFullscreen) or (@variationModalOverlay) {
+& when (@variationModalFullscreen) or (@variationModalOverlay) or (@variationModalCloseInside) {
   /*--------------
      Full Screen
   ---------------*/
@@ -461,9 +461,11 @@
       border-radius:0;
     }
   }
+  .ui.modal > .close.inside + .header,
   .ui.fullscreen.modal > .header {
     padding-right: @closeHitbox;
   }
+  .ui.modal > .close.inside,
   .ui.fullscreen.modal > .close {
     top: @innerCloseTop;
     right: @innerCloseRight;
@@ -562,7 +564,8 @@
       color: @invertedCloseColor;
     }
   }
-  & when (@variationModalFullscreen) {
+  & when (@variationModalFullscreen) or (@variationModalCloseInside) {
+    .ui.inverted.modal > .close.inside,
     .ui.inverted.fullscreen.modal > .close {
       color: @invertedCloseColor;
     }

src/themes/default/globals/variation.variables

@@ -425,6 +425,7 @@
 @variationModalAligned: true;
 @variationModalScrolling: true;
 @variationModalLegacy: true;
+@variationModalCloseInside: true;
 @variationModalSizes: @variationAllSizes;
 
 /* Popup */