contain-css-svelte 0.0.1

package/dist/layout/TabBar.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        sticky?: boolean | undefined;
+        active?: string | {
+            label: string;
+            value: string;
+        } | null | undefined;
+        items?: (string | {
+            label: string;
+            value: string;
+        })[] | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TabBarProps = typeof __propDef.props;
+export type TabBarEvents = typeof __propDef.events;
+export type TabBarSlots = typeof __propDef.slots;
+export default class TabBar extends SvelteComponent<TabBarProps, TabBarEvents, TabBarSlots> {
+}
+export {};

package/dist/layout/Tile.svelte

@@ -0,0 +1,172 @@
+<script>import Checkbox from "../controls/Checkbox.svelte";
+export let interactive = false;
+export let selectable = false;
+export let checked = false;
+$:
+  console.log("Checked=>", checked);
+</script>
+
+{#if selectable}
+  <label class="tile">
+    <div class="checkbox">
+      <input type="checkbox" bind:checked on:input on:change on:click />
+    </div>
+    <slot />
+  </label>
+{:else if interactive}
+  <button class="tile" on:click on:blur on:focus on:dblclick>
+    <slot />
+  </button>
+{:else}
+  <div class="tile">
+    <slot />
+  </div>
+{/if}
+
+<style>@charset "UTF-8";
+/* Convenience groupings */
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+.tile,
+.tile label,
+.tile button {
+  border: var(--tile-border, var(--border-width) var(--border-style) var(--border-color));
+  box-sizing: border-box;
+  border: var(--tile-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))));
+  border-top: var(--tile-border-top, var(--border-top, var(--border, tile)));
+  border-right: var(--tile-border-right, var(--border-right, var(--border, tile)));
+  border-bottom: var(--tile-border-bottom, var(--border-bottom, var(--border, tile)));
+  border-left: var(--tile-border-left, var(--border-left, var(--border, tile)));
+  padding: var(--tile-padding, var(--padding, 4px));
+  border-radius: var(--tile-square-radius, var(--square-radius, 0));
+  background: var(--tile-bg, var(--bg, white));
+  color: var(--tile-fg, var(--fg, black));
+  font-family: var(--tile-font-family, var(--font-family, sans-serif));
+  text-transform: var(--tile-text-transform, var(--text-transform, none));
+  text-decoration: var(--tile-text-decoration, var(--text-decoration, none));
+  font-size: var(--tile-font-size, var(--font-size, 16px));
+  font-weight: var(--tile-font-weight, var(--font-weight, 400));
+  line-height: var(--tile-line-height, var(--line-height, 1.5));
+  letter-spacing: var(--tile-letter-spacing, var(--letter-spacing, 0.05em));
+  width: var(--tile-width, calc(var(--space-lg) * 24));
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: var(--tile-justify, var(--justify, flex-start));
+  align-items: var(--tile-align, var(--align, center));
+}
+.tile :global(p), .tile :global(blockquote), .tile :global(dl), .tile :global(ul), .tile :global(ol),
+.tile label :global(p),
+.tile label :global(blockquote),
+.tile label :global(dl),
+.tile label :global(ul),
+.tile label :global(ol),
+.tile button :global(p),
+.tile button :global(blockquote),
+.tile button :global(dl),
+.tile button :global(ul),
+.tile button :global(ol) {
+  max-width: var(--tile-line-width, var(--line-width, 40em));
+  font-family: var(--tile-body-font-family, var(--body-font-family, var(--font-family)));
+  line-height: var(--tile-line-height, var(--line-height, 1.5));
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: var(--tile-body-font-weight, var(--body-font-weight, var(--normal)));
+}
+.tile :global(h1),
+.tile :global(h2),
+.tile :global(h3),
+.tile :global(h4),
+.tile :global(h5),
+.tile :global(h6),
+.tile label :global(h1),
+.tile label :global(h2),
+.tile label :global(h3),
+.tile label :global(h4),
+.tile label :global(h5),
+.tile label :global(h6),
+.tile button :global(h1),
+.tile button :global(h2),
+.tile button :global(h3),
+.tile button :global(h4),
+.tile button :global(h5),
+.tile button :global(h6) {
+  max-width: var(--tile-line-width, var(--line-width, 40em));
+  font-family: var(--tile-heading-font-family, var(--heading-font-family, var(--font-family)));
+  line-height: var(--tile-heading-line-height, var(--heading-line-height, var(--line-height)));
+  margin-left: auto;
+  margin-right: auto;
+  color: var(--heading-color, tile, var(--fg));
+  font-weight: var(--heading-font-weight, tile, var(--bold));
+}
+button.tile,
+label.tile {
+  cursor: pointer;
+  transition: filter, transform var(--button-transition, var(--control-transition, var(--transition, 300ms)));
+}
+button.tile:hover,
+label.tile:hover {
+  filter: var(--tile-hover-filter, var(--hover-filter, brightness(1.1)));
+  transform: var(--tile-hover-transform, var(--hover-transform, none));
+}
+button.tile:active,
+label.tile:active {
+  filter: var(--tile-hover-filter, var(--hover-filter, brightness(0.9)));
+  transform: var(--tile-hover-transform, var(--hover-transform, translate(var(--space), var(--space))));
+}
+label.tile {
+  background: var(--tile-selected-bg, var(--bg, white));
+  color: var(--tile-selected-fg, var(--fg, black));
+  font-family: var(--tile-selected-font-family, var(--font-family, sans-serif));
+  text-transform: var(--tile-selected-text-transform, var(--text-transform, none));
+  text-decoration: var(--tile-selected-text-decoration, var(--text-decoration, none));
+  font-size: var(--tile-selected-font-size, var(--font-size, 16px));
+  font-weight: var(--tile-selected-font-weight, var(--font-weight, 400));
+  line-height: var(--tile-selected-line-height, var(--line-height, 1.5));
+  letter-spacing: var(--tile-selected-letter-spacing, var(--letter-spacing, 0.05em));
+}
+/* Sizing code */
+.tile {
+  width: var(--tile-width, 200px);
+  height: calc(var(--tile-width, 200px) * 1.333);
+}
+/* Checkbox code */
+.tile {
+  position: relative;
+}
+.checkbox {
+  position: absolute;
+  right: var(--tile-padding, var(--container-padding, var(--padding, 4px)));
+  top: var(--tile-padding, var(--container-padding, var(--padding, 4px)));
+  display: inline-flex;
+  align-items: center;
+  width: var(--tile-checkbox-size, var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em)))));
+  height: var(--tile-checkbox-size, var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em)))));
+  background: var(--tile-checkbox-bg, var(--checkbox-bg, var(--toggle-bg, var(--secondary-bg, var(--bg, white)))));
+  color: var(--tile-checkbox-fg, var(--checkbox-fg, var(--toggle-fg, var(--secondary-fg, var(--fg, black)))));
+}
+.checkbox input {
+  display: none;
+}
+.checkbox:has(input:checked) {
+  background: var(--tile-checkbox-checked-bg, var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, white))))));
+  color: var(--tile-checkbox-checked-fg, var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, black))))));
+}
+.checkbox:has(input:checked)::after {
+  content: var(--tile-checkbox-check, var(--checkbox-check, "✓"));
+  font-size: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+  color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--fg, checkbox)));
+  animation: checkbox-check var(--checkbox-transition) ease-in-out;
+}
+@keyframes checkbox-check {
+  0% {
+    width: 0;
+    overflow: hidden;
+  }
+  100% {
+    width: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+  }
+}</style>

package/dist/layout/Tile.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        interactive?: boolean | undefined;
+        selectable?: boolean | undefined;
+        checked?: boolean | undefined;
+    };
+    events: {
+        input: Event;
+        change: Event;
+        click: MouseEvent;
+        blur: FocusEvent;
+        focus: FocusEvent;
+        dblclick: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TileProps = typeof __propDef.props;
+export type TileEvents = typeof __propDef.events;
+export type TileSlots = typeof __propDef.slots;
+export default class Tile extends SvelteComponent<TileProps, TileEvents, TileSlots> {
+}
+export {};

package/dist/misc/Code.svelte

@@ -0,0 +1,27 @@
+<script>export let code;
+import Prism from "svelte-prism";
+import "prismjs/themes/prism.css";
+export let inline = false;
+</script>
+
+<div class="code" class:inline>
+  <Prism language="html" source={code} />
+</div>
+
+<style>
+  div {
+    width: var(--code-width, 100%);
+    height: var(--code-height, auto);
+  }
+  div > pre {
+    width: var(--code-width, 100%);
+    overflow-x: auto;
+  }
+  .code :global(code[class*="language-"]),
+  .code :global(pre[class*="language-"]) {
+    font-family: var(--code-font-family);
+    font-size: var(--code-font-size);
+    line-height: var(--code-line-height);
+    tab-size: var(--code-tab-size);
+  }
+</style>

package/dist/misc/Code.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import "prismjs/themes/prism.css";
+declare const __propDef: {
+    props: {
+        code: string;
+        inline?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+}
+export {};

package/dist/sass/_containers.scss

@@ -0,0 +1,117 @@
+$xxsmall : 120px;
+$xsmall : 240px;
+$small : 320px;
+$medium : 640px;
+$large: 1024px;
+$xlarge: 1200px;
+
+@mixin width_container($min-width: null, $max-width: null) {
+  @if $min-width !=null and $max-width !=null {
+    @container (min-width: #{$min-width}) and (max-width: #{$max-width}) {
+      @content;
+    }
+  }
+
+  @else if $min-width !=null {
+    @container (min-width: #{$min-width}) {
+      @content;
+    }
+  }
+
+  @else if $max-width !=null {
+    @container (max-width: #{$max-width}) {
+      @content;
+    }
+  }
+}
+
+
+@mixin height_container($min-height: null, $max-height: null) {
+  @if $min-height !=null and $max-height !=null {
+    @container (min-height: #{$min-height}) and (max-height: #{$max-height}) {
+      @content;
+    }
+  }
+
+  @else if $min-height !=null {
+    @container (min-height: #{$min-height}) {
+      @content;
+    }
+  }
+
+  @else if $max-height !=null {
+    @container (max-height: #{$max-height}) {
+      @content;
+    }
+  }
+}
+
+@mixin box_container($min-width: null, $max-width: null, $min-height: null, $max-height: null) {
+  @if $min-width !=null and $max-width !=null and $min-height !=null and $max-height !=null {
+    @container (min-width: #{$min-width}) and (max-width: #{$max-width}) and (min-height: #{$min-height}) and (max-height: #{$max-height}) {
+      @content;
+    }
+  }
+
+  @else if $min-width !=null and $min-height !=null {
+    @container (min-width: #{$min-width}) and (min-height: #{$min-height}) {
+      @content;
+    }
+  }
+
+  @else if $max-width !=null and $max-height !=null {
+    @container (max-width: #{$max-width}) and (max-height: #{$max-height}) {
+      @content;
+    }
+  }
+
+  @else if $min-width !=null and $max-height !=null {
+    @container (min-width: #{$min-width}) and (max-height: #{$max-height}) {
+      @content;
+    }
+  }
+
+  @else if $max-width !=null and $min-height !=null {
+    @container (max-width: #{$max-width}) and (min-height: #{$min-height}) {
+      @content;
+    }
+  }
+
+  @else if $min-width !=null {
+    @container (min-width: #{$min-width}) {
+      @content;
+    }
+  }
+
+  @else if $max-width !=null {
+    @container (max-width: #{$max-width}) {
+      @content;
+    }
+  }
+
+  @else if $min-height !=null {
+    @container (min-height: #{$min-height}) {
+      @content;
+    }
+  }
+
+  @else if $max-height !=null {
+    @container (max-height: #{$max-height}) {
+      @content;
+    }
+  }
+}
+
+@mixin aspect_container($min-width: null, $max-width: null, $aspect-ratio: 16/9) {
+  $min-height: null;
+  $max-height: null;
+  @if $min-width != null {  
+    $min-height: $min-width * $aspect-ratio;
+  }
+  /* @if $max-width != null {  
+    $max-height: $max-width * $aspect-ratio;
+  }   */
+  @include box_container($min-width, $max-width, $min-height, $max-height) {
+    @content;
+  };
+}

package/dist/sass/_mixins.scss

@@ -0,0 +1,309 @@
+@import 'containers';
+
+@function var-with-fallbacks($base-var, $args...) {
+  // Remove the initial -- from the base variable for concatenation purposes
+  $base-var-name: str-slice($base-var, 3);
+  $fallback : nth($args,length($args));
+
+  // Initialize the result with the final fallback value
+  $result: var($base-var,$fallback);
+
+  // Check if only one argument (apart from $base-var) is provided
+  @if length($args)==1 {
+    // Only one argument means it's the fallback value
+    @return var(#{$base-var}, #{$fallback});
+  }
+
+  // Iterate through the prefixes in reverse order
+  @for $i from length($args)-1 through 1 {
+    $prefix: nth($args,$i);
+    // Construct the variable name by concatenating the prefix and base variable name
+    // e.g., --card-bg if $prefix is 'card' and $base-var-name is 'bg'
+    $prefixed-var: unquote('--#{$prefix}-#{$base-var-name}');
+    // Nest the current prefixed variable as a fallback to the current result
+    $result: var(#{$prefixed-var}, #{$result});
+  }
+
+  // Return the final CSS var() function with all fallbacks
+  // e.g., var(--card-bg, var(--container-bg, var(--bg, white)))
+  @return #{$result};
+}
+
+@mixin color-props ($prefixes...) {
+  background: var-with-fallbacks(--bg, append($prefixes,white)...);
+  color: var-with-fallbacks(--fg, append($prefixes,black)...);
+  //text-shadow: var-with-fallbacks(--text-shadow,append($prefixes,#0000));
+}
+
+@mixin typography-props ($prefixes...) {
+  font-family: var-with-fallbacks(--font-family, append($prefixes, sans-serif)...);
+  text-transform: var-with-fallbacks(--text-transform, append($prefixes, none)...);
+  text-decoration: var-with-fallbacks(--text-decoration, append($prefixes, none)...);
+  font-size: var-with-fallbacks(--font-size, append($prefixes, 16px)...);
+  font-weight: var-with-fallbacks(--font-weight, append($prefixes, 400)...);
+  line-height: var-with-fallbacks(--line-height, append($prefixes, 1.5)...);
+  letter-spacing: var-with-fallbacks(--letter-spacing, append($prefixes, 0.05em)...);
+
+}
+
+@mixin typography-container-props ($prefixes...) {
+  @include typography-props($prefixes...);  
+  & :global(p),:global(blockquote),:global(dl),:global(ul),:global(ol) {
+    max-width: var-with-fallbacks(--line-width, append($prefixes, 40em)...);
+    font-family: var-with-fallbacks(--body-font-family, append($prefixes, var(--font-family))...);
+    line-height: var-with-fallbacks(--line-height, append($prefixes, 1.5)...);
+    margin-left: auto;
+    margin-right: auto;
+    font-weight: var-with-fallbacks(--body-font-weight, append($prefixes, var(--normal))...);
+  }  
+  & :global(h1),
+   :global(h2),
+   :global(h3),
+   :global(h4),
+   :global(h5),
+   :global(h6) {
+    max-width: var-with-fallbacks(--line-width, append($prefixes, 40em)...);
+    font-family: var-with-fallbacks(--heading-font-family, append($prefixes, var(--font-family))...);
+    line-height: var-with-fallbacks(--heading-line-height, append($prefixes, var(--line-height))...);
+    margin-left: auto;
+    margin-right: auto;
+    color: var(--heading-color,append($prefixes,var(--fg))...);
+    font-weight: var(--heading-font-weight,append($prefixes,var(--bold)));
+  }   
+}
+
+@mixin padding-props ($prefixes...) {
+  padding: var-with-fallbacks(--padding, append($prefixes, 4px)...);
+}
+
+@mixin border-props-border ($prefixes...) {
+  border: var-with-fallbacks(
+    --border, 
+    append(
+      $prefixes, 
+      var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))
+    )...);  
+  $directions: (
+    top,
+    right,
+    bottom,
+    left
+  );
+  $rectProps : (border);
+
+  // Loop through each direction
+  @each $dir in $directions {
+    // Apply prop for each direction
+    @each $p in $rectProps {
+      #{$p}-#{$dir}: var-with-fallbacks(--#{$p}-#{$dir},
+        append($prefixes,          
+          var-with-fallbacks(--border,$prefixes...)
+        )...)
+    }
+  }
+}
+@mixin border-props-none ($prefixes...) {
+  border: var-with-fallbacks(--border, append($prefixes,none)...);
+  $directions: (
+    top,
+    right,
+    bottom,
+    left
+  );
+$rectProps : (border);
+
+// Loop through each direction
+@each $dir in $directions {
+
+  // Apply prop for each direction
+  @each $p in $rectProps {
+    #{$p}-#{$dir}: var-with-fallbacks(--#{$p}-#{$dir},
+      append($prefixes,
+        var-with-fallbacks(--border,append($prefixes,none)...)
+      )...);
+  }
+}
+}
+
+@mixin box-props-square-border($prefixes...) {
+  box-sizing: border-box;
+  
+  @include border-props-border($prefixes...);
+  @include padding-props($prefixes...);
+  border-radius: var-with-fallbacks(--square-radius, append($prefixes, 0)...);
+}
+
+@mixin box-props-square($prefixes...) {
+  box-sizing: border-box;   
+  @include border-props-none($prefixes...);
+  @include padding-props($prefixes...);
+  border-radius: var-with-fallbacks(--square-radius, append($prefixes, 0)...);
+}
+
+@mixin box-props($prefixes...) {
+  // Using the var-with-fallbacks function for each property
+  box-sizing: border-box;
+  @include padding-props($prefixes...);
+  @include border-props-none($prefixes...);
+  border-radius: var-with-fallbacks(--border-radius, append($prefixes,none)...);
+}
+
+@mixin box-props-border($prefixes...) {
+  box-sizing: border-box;
+  @include border-props-border($prefixes..., var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)));
+  @include padding-props($prefixes...);
+  border-radius: var-with-fallbacks(--radius, append($prefixes, 0)...);
+}
+
+@mixin box-props-bottom ($prefixes...) {
+  // Using the var-with-fallbacks function for each property
+  box-sizing: border-box;
+  @include padding-props($prefixes...);
+  @include border-props-none($prefixes...);
+  border-bottom-right-radius: var-with-fallbacks(--border-radius, $prefixes...);
+  border-bottom-left-radius: var-with-fallbacks(--border-radius, $prefixes...);
+}
+@mixin box-props-top ($prefixes...) {
+  // Using the var-with-fallbacks function for each property
+  box-sizing: border-box;
+  @include padding-props($prefixes...);
+  @include border-props-none($prefixes...);  
+  border-top-right-radius: var-with-fallbacks(--border-radius, $prefixes...);
+  border-top-left-radius: var-with-fallbacks(--border-radius, $prefixes...);
+}
+
+@mixin box-shadow($prefixes...) {  
+  //works:  
+  $shadow-distance: var-with-fallbacks(--shadow-distance, append($prefixes, var(--space-md))...);
+  $shadow-blur: var-with-fallbacks(--shadow-blur, append($prefixes, var(--space))...);
+  $shadow-color: var-with-fallbacks(--shadow-color, append($prefixes, rgba(127, 127, 127, 0.4))...);
+  
+  box-shadow: $shadow-distance $shadow-distance $shadow-blur $shadow-color;
+}
+
+@mixin clickable($prefixes...) {
+  cursor: pointer;
+  transition: filter,transform var-with-fallbacks(--transition,button,control,300ms);
+  &:hover {
+    filter: var-with-fallbacks(--hover-filter, append($prefixes, brightness(1.1))...);
+    transform: var-with-fallbacks(--hover-transform, append($prefixes, none)...);
+  }
+  &:active {
+      filter: var-with-fallbacks(--hover-filter, append($prefixes, brightness(0.9))...);
+      transform: var-with-fallbacks(--hover-transform, append($prefixes, translate(var(--space),var(--space)))...);
+    }
+}
+
+@mixin custom-scrollbar($prefixes...) {
+  overflow-y: auto;
+
+  // Customizing the scrollbar
+  &::-webkit-scrollbar {
+    width: var-with-fallbacks(--scrollbar-width, append($prefixes, var(--space-md))...);
+    height: var-with-fallbacks(--scrollbar-height, append($prefixes, var(--gap))...);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--bg))...);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, var(--stripe-bg))...);
+
+    border-radius: var-with-fallbacks(--scrollbar-thumb-radius, append($prefixes, var(--border-radius))...);
+
+    &:hover {
+      background: var-with-fallbacks(--scrollbar-thumb-hover-bg, append($prefixes, var(--secondary-bg))...);
+      
+    }
+  }
+
+  // For Firefox
+  scrollbar-width: var-with-fallbacks(--scrollbar-width, append($prefixes, thin)...);
+  scrollbar-color: var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, #888)...) var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--border-color))...);
+}
+
+/* Convenience groupings */
+
+@mixin global-buttons {
+  & :global(a),
+  & :global(button),
+  & :global(input[type="submit"]),
+  & :global(.button) {
+    @content
+  }
+}
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+    @mixin responsive-content($max-width: null, $min-width: null, $max-height: null, $min-height: null) {
+  
+      // Max-width and Max-height
+      @if $max-width and $max-height {
+        @media (max-width: #{$max-width}) and (max-height: #{$max-height}) {
+          @content;
+        }
+  
+        @container (max-width: #{$max-width}) and (max-height: #{$max-height}) {
+          @content;
+        }
+      }
+  
+      // Max-width only
+      @else if $max-width {
+        @media (max-width: #{$max-width}) {
+          @content;
+        }
+  
+        @container (max-width: #{$max-width}) {
+          @content;
+        }
+      }
+  
+      // Max-height only
+      @else if $max-height {
+        @media (max-height: #{$max-height}) {
+          @content;
+        }
+  
+        @container (max-height: #{$max-height}) {
+          @content;
+        }
+      }
+  
+      // Min-width and Min-height
+      @if $min-width and $min-height {
+        @media (min-width: #{$min-width}) and (min-height: #{$min-height}) {
+          @content;
+        }
+  
+        @container (min-width: #{$min-width}) and (min-height: #{$min-height}) {
+          @content;
+        }
+      }
+  
+      // Min-width only
+      @else if $min-width {
+        @media (min-width: #{$min-width}) {
+          @content;
+        }
+  
+        @container (min-width: #{$min-width}) {
+          @content;
+        }
+      }
+  
+      // Min-height only
+      @else if $min-height {
+        @media (min-height: #{$min-height}) {
+          @content;
+        }
+  
+        @container (min-height: #{$min-height}) {
+          @content;
+        }
+      }
+    }