@sprinklrjs/spaceweb-themes 12.33.2 → 14.11.3

package/styles/additionals.css

@@ -0,0 +1,1042 @@
+
+.hyperspace-light {
+  --sw-btn-tertiary-text: #1250DE;
+  --sw-btn-tertiary-hover: #e6f3ff;
+  --sw-btn-tertiary-active: #d3e8ff;
+  --sw-ai-border-01-gradient: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #FFF4DF 0%, #E9FDE6 49%, #E2FBFF 100%) border-box;
+  --sw-ai-border-gradient: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #FFC005 2%, #FFE94F 12%, #8DE76E 21%, #3BE5FF 50%, #44BFFF 85%) border-box;
+}
+.hyperspace-dark {
+  --sw-btn-tertiary-text: #3188FF;
+  --sw-btn-tertiary-hover: #061f56;
+  --sw-btn-tertiary-active: #0E3386;
+  --sw-ai-border-01-gradient: linear-gradient(#1C1C1F, #1C1C1F) padding-box, linear-gradient(to right, #493B21 0%, #2C462B 49%, #22444C 100%) border-box;
+  --sw-ai-border-gradient: linear-gradient(#121214, #121214) padding-box, linear-gradient(to right, #FFC005 2%, #FFE94F 12%, #8DE76E 21%, #3BE5FF 50%, #44BFFF 85%) border-box;
+}
+
+
+.grid-cols-\[--sw-grid-cols\] {
+  grid-template-columns: repeat(var(--sw-grid-cols), minmax(0, 1fr));
+}
+
+.grid-rows-\[--sw-grid-rows\] {
+  grid-template-rows: repeat(var(--sw-grid-rows), minmax(0, 1fr));
+}
+
+.gap-x-\[--sw-gap-x\] {
+  grid-column-gap: var(--sw-gap-x);
+  column-gap: var(--sw-gap-x);
+}
+
+.gap-y-\[--sw-gap-y\] {
+  grid-row-gap: var(--sw-gap-y);
+  row-gap: var(--sw-gap-y);
+}
+
+.col-start-\[--sw-col-start\] {
+  grid-column-start: var(--sw-col-start);
+}
+
+.col-end-\[--sw-col-end\] {
+  grid-column-end: var(--sw-col-end);
+}
+
+.row-start-\[--sw-row-start\] {
+  grid-row-start: var(--sw-row-start);
+}
+
+.row-end-\[--sw-row-end\] {
+  grid-row-end: var(--sw-row-end);
+}
+
+.translate-\[--sw-translate\] {
+  transform: translateX(var(--sw-translate-x)) translateY(var(--sw-translate-y));
+}
+
+.st-trans-\[--sw-transform\] {
+  transform: var(--sw-transform);
+}
+
+.w-\[--sw-width\] {
+  width: var(--sw-width);
+}
+
+.max-w-4\.75 {
+  max-width: 1.9rem;
+}
+
+.max-w-\[50vw\] {
+  max-width: 50vw;
+}
+
+.max-w-\[--sw-max-width\] {
+  max-width: var(--sw-max-width);
+}
+
+.min-h-6\.5 {
+  min-height: 2.6rem;
+}
+
+.min-h-16 {
+  min-height: 6.4rem;
+}
+
+.max-h-62\.5 {
+  max-height: 25rem;
+}
+
+.max-h-\[--sw-max-height\] {
+  max-height: var(--sw-max-height);
+}
+
+.h-\[--sw-height\] {
+  height: var(--sw-height);
+}
+
+.z-\[--sw-z-index\] {
+  z-index: var(--sw-z-index);
+}
+
+.isolation-\[--sw-isolate\] {
+  isolation: var(--sw-isolate);
+}
+
+.resize-\[--sw-resize\] {
+  resize: var(--sw-resize);
+}
+
+.pt-\[--sw-padding-block-start\] {
+  padding-block-start: var(--sw-padding-block-start);
+}
+
+.pb-\[--sw-padding-block-end\] {
+  padding-block-end: var(--sw-padding-block-end);
+}
+
+.pl-\[--sw-padding-inline-start\] {
+  padding-inline-start: var(--sw-padding-inline-start);
+}
+
+.pr-\[--sw-padding-inline-end\] {
+  padding-inline-end: var(--sw-padding-inline-end);
+}
+
+.rounded-\[--sw-rounded\] {
+  border-radius: var(--sw-rounded);
+}
+
+.rounded-t-\[--sw-rounded-t\] {
+  border-start-end-radius: var(--sw-rounded-t);
+  border-start-start-radius: var(--sw-rounded-t);
+}
+
+.bg-\[--sw-bg-color\] {
+  --tw-bg-opacity: 1;
+  background-color: var(--sw-bg-color);
+}
+
+.bg-image-\[--sw-bg-image\] {
+  --tw-bg-opacity: 1;
+  background-image: var(--sw-bg-image);
+}
+
+.hover\:bg-\[--sw-bg-color-hover\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: var(--sw-bg-color-hover);
+}
+
+.active\:bg-\[--sw-bg-color-active\]:active {
+  --tw-bg-opacity: 1;
+  background-color: var(--sw-bg-color-active);
+}
+
+.focus\:bg-\[--sw-bg-color-focus\]:focus {
+  --tw-bg-opacity: 1;
+  background-color: var(--sw-bg-color-focus);
+}
+
+.focus-within\:bg-\[--sw-bg-color-focus-within\]:focus-within {
+  --tw-bg-opacity: 1;
+  background-color: var(--sw-bg-color-focus-within);
+}
+
+.bg-\[--sw-bg\] {
+  --tw-bg-opacity: 1;
+  background: var(--sw-bg);
+}
+
+.bg-\[--sw-bg-size\] {
+  background-size: var(--sw-bg-size);
+}
+
+.bg-full {
+  background-size: 100%;
+}
+
+.bg-clip-text {
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+
+.box-shadow-none {
+  box-shadow: none;
+}
+
+.font-size-inherit {
+  font-size: inherit;
+}
+
+.webkit-line-clamp-\[--sw-webkit-line-clamp\] {
+  -webkit-line-clamp: var(--sw-webkit-line-clamp);
+}
+
+.webkit-text-\[--spr-text-02\] {
+  -webkit-text-fill-color: var(--spr-text-02, #434350);
+}
+
+.webkit-text-transparent {
+  -webkit-text-fill-color: transparent;
+}
+
+.webkit-tap-highlight-transparent {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mx-\[--sw-margin-inline\] {
+  -webkit-margin-start: var(--sw-margin-inline);
+  margin-inline-start: var(--sw-margin-inline);
+  -webkit-margin-end: var(--sw-margin-inline);
+  margin-inline-end: var(--sw-margin-inline);
+}
+
+.my-\[--sw-margin-block\] {
+  -webkit-margin-before: var(--sw-margin-block);
+  margin-block-start: var(--sw-margin-block);
+  -webkit-margin-after: var(--sw-margin-block);
+  margin-block-end: var(--sw-margin-block);
+}
+
+.ml-\[--sw-margin-inline-start\] {
+  margin-inline-start: var(--sw-margin-inline-start);
+}
+
+.mr-\[--sw-margin-inline-end\] {
+  margin-inline-end: var(--sw-margin-inline-end);
+}
+
+.mt-\[--sw-margin-block-start\] {
+  margin-block-start: var(--sw-margin-block-start);
+}
+
+.mb-\[--sw-margin-block-end\] {
+  margin-block-end: var(--sw-margin-block-end);
+}
+
+/* directional prop needed for popover @no-flip styles */
+.ml-\[--sw-margin-left\] {
+  margin-left: var(--sw-margin-left);
+}
+
+.mr-\[--sw-margin-right\] {
+  margin-right: var(--sw-margin-right);
+}
+
+.background-none {
+  background: none;
+}
+
+.caret-transparent {
+  caret-color: transparent;
+}
+
+.spr-ui-focus-disabled {
+  background-color: rgba(var(--spr-ui-focus), 0.5);
+}
+
+.spr-support-error-disabled {
+  background-color: rgba(var(--spr-support-error), 0.5);
+}
+
+.spr-support-success-disabled {
+  background-color: rgba(var(--spr-support-success), 0.5);
+}
+
+.spr-support-warning-disabled {
+  background-color: rgba(var(--spr-support-warning), 0.5);
+}
+
+.disabled\:spr-clr-blue-highlight:disabled {
+  background-color: var(--spr-clr-blue-highlight, #e8f0fe);
+}
+
+.active\:spr-clr-blue-highlight:active {
+  background-color: var(--spr-clr-blue-highlight, #e8f0fe);
+}
+
+.border-spr-field {
+  border-color: var(--spr-field, #dbdbdb);
+}
+
+.border-b-\[--borderWidth-default\] {
+  border-block-end-width: var(--borderWidth-default, 1px);
+}
+
+.border-b-\[--sw-border-bottom-color\] {
+  border-bottom-color: var(--sw-border-bottom-color);
+}
+
+.border-t-\[--sw-border-top-color\] {
+  border-top-color: var(--sw-border-top-color);
+}
+
+.border-l-\[--sw-border-left-color\] {
+  border-left-color: var(--sw-border-left-color);
+}
+
+.border-r-\[--sw-border-right-color\] {
+  border-right-color: var(--sw-border-right-color);
+}
+
+.delay-\[--sw-delay\] {
+  animation-delay: var(--sw-delay);
+}
+
+.stroke-width-\[--sw-stroke-width\] {
+  stroke-width: var(--sw-stroke-width);
+}
+
+.stroke-\[--sw-stroke\] {
+  stroke: var(--sw-stroke);
+}
+
+.color-\[--sw-color\] {
+  color: var(--sw-color);
+}
+
+.hover\:color-\[--sw-color-hover\]:hover {
+  color: var(--sw-color-hover);
+}
+
+.focus\:color-\[--sw-color-focus\]:focus {
+  color: var(--sw-color-focus);
+}
+
+.focus-within\:color-\[--sw-color-focus-within\]:focus-within {
+  color: var(--sw-color-focus-within);
+}
+
+.active\:color-\[--sw-color-active\]:active {
+  color: var(--sw-color-active);
+}
+
+.text-inherit {
+  color: inherit;
+}
+
+.background-inherit {
+  background: inherit;
+}
+
+.clip-0 {
+  clip: rect(0, 0, 0, 0);
+}
+
+.word-spacing-normal {
+  word-spacing: normal;
+}
+
+.ml-\[--sw-stack-margin-left\] {
+  margin-inline-start: var(--sw-stack-margin-left);
+}
+
+.mt-\[--sw-stack-margin-top\] {
+  margin-block-start: var(--sw-stack-margin-top);
+}
+
+.ml-\[--sw-stack-item-margin-left\] {
+  margin-inline-start: var(--sw-stack-item-margin-left);
+}
+
+.mt-\[--sw-stack-item-margin-top\] {
+  margin-block-start: var(--sw-stack-item-margin-top);
+}
+
+.sw-transparent-scrollbar::-webkit-scrollbar {
+  background-color: transparent;
+}
+
+/* directional prop needed for popover @no-flip left styles */
+.left-\[--sw-left-directional\] {
+  left: var(--sw-left-directional);
+}
+
+.duration-\[--sw-duration\] {
+  transition-duration: var(--sw-duration);
+}
+
+.border-\[--sw-border-color\] {
+  border-color: var(--sw-border-color);
+}
+
+.border-t-\[--sw-border-t-color\] {
+  border-block-start-color: var(--sw-border-t-color);
+}
+
+.border-b-\[--sw-border-b-color\] {
+  border-block-end-color: var(--sw-border-b-color);
+}
+
+.border-l-\[--sw-border-l-color\] {
+  border-inline-start-color: var(--sw-border-l-color);
+}
+
+.border-r-\[--sw-border-r-color\] {
+  border-inline-end-color: var(--sw-border-r-color);
+}
+
+.hover\:border-\[--sw-border-color-hover\]:hover {
+  border-color: var(--sw-border-color-hover);
+}
+
+.focus\:border-\[--sw-border-color-focus\]:focus {
+  border-color: var(--sw-border-color-focus);
+}
+
+.active\:border-transparent:active {
+  border-color: transparent;
+}
+
+.timing-function-\[--sw-timing-function\] {
+  transition-timing-function: var(--sw-timing-function);
+}
+
+.duration-\[--sw-duration\] {
+  transition-duration: var(--sw-duration);
+}
+
+.sw-transparent-scrollbar-thumb::-webkit-scrollbar-thumb {
+  background-color: var(--spr-ui-03);
+  border-radius: 8px;
+  border-width: 4px;
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
+}
+
+.sw-ai-textarea-scrollbar::-webkit-scrollbar {
+  width: 20px;
+  background-color: transparent;
+}
+
+.sw-ai-textarea-scrollbar-thumb::-webkit-scrollbar-thumb {
+  background-color: var(--spr-ui-03);
+  border-radius: 50rem;
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
+}
+
+.translate-y-\[--sw-translate-y\] {
+  transform: translateY(var(--sw-translate-y));
+}
+
+.min-w-\[--sw-min-width\] {
+  min-width: var(--sw-min-width);
+}
+
+.sw-input-number {
+  -moz-appearance: textfield;
+}
+
+.sw-input-number::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.sw-input-number::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+.before\:content-none::before {
+  content: none;
+}
+
+.hover\:before\:content-empty:hover::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.hover\:after\:content-empty:hover::after {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.active\:before\:content-empty:active::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.active\:before\:content-none:active::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+
+.active\:after\:content-empty:active::after {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.active\:after\:content-none:active::after {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+
+.before\:top-\[--sw-before-top\]::before {
+  inset-block-start: var(--sw-before-top);
+}
+
+.before\:bottom-\[--sw-before-bottom\]::before {
+  inset-block-end: var(--sw-before-bottom);
+}
+
+.before\:left-\[--sw-before-left\]::before {
+  inset-inline-start: var(--sw-before-left);
+}
+
+.before\:right-\[--sw-before-right\]::before {
+  inset-inline-end: var(--sw-before-right);
+}
+
+.before\:h-\[--sw-before-height\]::before {
+  height: var(--sw-before-height);
+}
+
+.before\:w-\[--sw-before-width\]::before {
+  width: var(--sw-before-width);
+}
+
+.active\:shadow-none:active {
+  box-shadow: none;
+}
+
+.shadow-\[--sw-shadow\] {
+  box-shadow: var(--sw-shadow);
+}
+
+.hover\:shadow-\[--sw-shadow-hover\]:hover {
+  box-shadow: var(--sw-shadow-hover);
+}
+
+.focus\:shadow-\[--sw-shadow-focus\]:focus {
+  box-shadow: var(--sw-shadow-focus);
+}
+
+.text-\[--sw-font-size\] {
+  font-size: var(--sw-font-size);
+}
+
+@keyframes popover-hover {
+  0% {
+    pointer-events: none;
+  }
+
+  99% {
+    pointer-events: none;
+  }
+
+  100% {
+    pointer-events: auto;
+  }
+}
+
+.sw-popover-hover-animation {
+  animation-name: popover-hover;
+  animation-duration: 100ms;
+}
+
+.transform-none {
+  transform: none;
+}
+
+.transition-\[transform-opacity\] {
+  transition-property: transform, opacity;
+}
+
+.transition-\[opacity\] {
+  transition-property: opacity;
+}
+
+.text-\[85\%\] {
+  font-size: 85%;
+}
+
+.top-\[--sw-top\] {
+  top: var(--sw-top);
+}
+
+.right-\[--sw-right\] {
+  inset-inline-end: var(--sw-right);
+}
+
+.ai-border-01 {
+  background: var(--sw-ai-border-01-gradient);
+  border-color: transparent;
+}
+
+.sw-btn-tertiary-hover,
+.hover\:sw-btn-tertiary-hover:hover {
+  background-color: var(--sw-btn-tertiary-hover);
+}
+
+
+.disabled\:sw-btn-tertiary-text:disabled,
+.sw-btn-tertiary-text {
+  color: var(--sw-btn-tertiary-text);
+}
+
+.sw-btn-tertiary-active,
+.active\:sw-btn-tertiary-active:active {
+  background-color: var(--sw-btn-tertiary-active);
+}
+
+.disabled\:sw-btn-bg-error:disabled,
+.sw-btn-bg-error {
+  background-color: #dc2625;
+}
+
+.disabled\:sw-btn-border-error:disabled,
+.sw-btn-border-error {
+  border-color: #dc2625;
+}
+
+.sw-btn-bg-error-hover,
+.hover\:sw-btn-bg-error-hover:hover {
+  background-color: #b91c1b;
+}
+
+.sw-btn-border-error-hover,
+.hover\:sw-btn-border-error-hover:hover {
+  border-color: #b91c1b;
+}
+
+.sw-btn-bg-error-active,
+.active\:sw-btn-bg-error-active:active {
+  background-color: #991b1b;
+}
+
+.sw-btn-border-error-active,
+.active\:sw-btn-border-error-active:active {
+  border-color: #991b1b;
+}
+
+.ai-border-gradient {
+  background: var(--sw-ai-border-gradient);
+  border-color: transparent;
+}
+
+.outline-hidden {
+  outline-style: hidden;
+}
+
+.after\:outline-color-\[--sw-outline-color\]::after {
+  outline-color: var(--sw-outline-color);
+}
+
+.after\:outline-2::after {
+  outline-width: 2px;
+}
+
+.after\:-outline-offset-2::after {
+  outline-offset: -2px;
+}
+
+.after\:outline::after {
+  outline-style: solid;
+}
+
+@keyframes spinner-loader-animation {
+  10% {
+    opacity: 0.125;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes clip-loader-animation {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(180deg) scale(0.8);
+  }
+
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes beat-loader-animation {
+  50% {
+    transform: scale(0.75);
+    opacity: 0.2;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes button-loader-animation {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes select-value-tombstone-animation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.sw-select-value-tombstone-animation {
+  animation-name: select-value-tombstone-animation;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+.sw-button-loader-animation {
+  animation-name: button-loader-animation;
+}
+
+.sw-spinner-loader-animation {
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: step-start;
+  animation-name: spinner-loader-animation;
+}
+
+.sw-clip-loader-animation {
+  animation-duration: 0.75s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: clip-loader-animation;
+}
+
+.sw-beat-loader-animation {
+  animation-duration: 0.7s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+  animation-name: beat-loader-animation;
+}
+
+.pointer-events-all {
+  pointer-events: all;
+}
+
+@keyframes ai-animated-gradient-border-animation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.sw-ai-deprecated-animated-gradient-border:hover {
+  position: relative;
+  z-index: 0;
+}
+
+.sw-ai-deprecated-animated-gradient-border:hover::before {
+  background: var(--ai-ui-01);
+  position: absolute;
+  background-size: var(--sw-ai-animated-background-size, auto);
+  z-index: -1;
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
+  filter: blur(3px);
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-name: ai-animated-gradient-border-animation;
+  animation-play-state: var(--sw-animation-play-state);
+  border-radius: var(--sw-before-border-radius);
+  inset-inline-start: var(--sw-before-left);
+}
+
+.sw-ai-deprecated-animated-gradient-border:hover::after {
+  z-index: -1;
+  top: 0px;
+  inset-inline-start: 0px;
+  position: absolute;
+  background: var(--spr-ui-01);
+  width: 100%;
+  height: 100%;
+  border-radius: var(--sw-after-border-radius);
+}
+
+.sw-ai-active-background:active {
+  background: var(--ai-ui-02) padding-box, var(--ai-ui-01) border-box;
+}
+
+.sw-ai-active-background:hover:active {
+  background: var(--ai-ui-02) padding-box, var(--ai-ui-01) border-box;
+}
+
+.focus-within\:spr-clr-magenta-border:focus-within {
+  border-color: var(--spr-clr-magenta-border, #cb1cce);
+}
+
+.sw-ai-button-background {
+  background: var(--sw-ai-button-background);
+}
+
+.hover\:sw-ai-button-background:hover {
+  background: var(--sw-ai-button-hover-background);
+}
+
+.sw-ai-button-background:disabled {
+  background: var(--sw-ai-button-background);
+}
+
+.sw-ai-button-selected-background {
+  background: var(--ai-ui-02) padding-box, var(--ai-ui-01) border-box;
+}
+
+.touch-none {
+  touch-action: none;
+}
+
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
+
+@media (min-width: 640px) {
+  .sm\:grid-cols-\[--sw-grid-cols\] {
+    grid-template-columns: repeat(var(--sw-sm-grid-cols), minmax(0, 1fr));
+  }
+
+  .sm\:grid-rows-\[--sw-grid-rows\] {
+    grid-template-rows: repeat(var(--sw-sm-grid-rows), minmax(0, 1fr));
+  }
+
+  .sm\:gap-x-\[--sw-gap-x\] {
+    grid-column-gap: var(--sw-sm-gap-x);
+    column-gap: var(--sw-sm-gap-x);
+  }
+
+  .sm\:gap-y-\[--sw-gap-y\] {
+    grid-row-gap: var(--sw-sm-gap-y);
+    row-gap: var(--sw-sm-gap-y);
+  }
+
+  .sm\:col-start-\[--sw-col-start\] {
+    grid-column-start: var(--sw-sm-col-start);
+  }
+
+  .sm\:col-end-\[--sw-col-end\] {
+    grid-column-end: var(--sw-sm-col-end);
+  }
+
+  .sm\:row-start-\[--sw-row-start\] {
+    grid-row-start: var(--sw-sm-row-start);
+  }
+
+  .sm\:row-end-\[--sw-row-end\] {
+    grid-row-end: var(--sw-sm-row-end);
+  }
+
+  .sm\:ml-\[--sw-stack-margin-left\] {
+    margin-inline-start: var(--sw-sm-stack-margin-left);
+  }
+
+  .sm\:mt-\[--sw-stack-margin-top\] {
+    margin-block-start: var(--sw-sm-stack-margin-top);
+  }
+
+  .sm\:ml-\[--sw-stack-item-margin-left\] {
+    margin-inline-start: var(--sw-sm-stack-item-margin-left);
+  }
+
+  .sm\:mt-\[--sw-stack-item-margin-top\] {
+    margin-block-start: var(--sw-sm-stack-item-margin-top);
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-\[--sw-grid-cols\] {
+    grid-template-columns: repeat(var(--sw-md-grid-cols), minmax(0, 1fr));
+  }
+
+  .md\:grid-rows-\[--sw-grid-rows\] {
+    grid-template-rows: repeat(var(--sw-md-grid-rows), minmax(0, 1fr));
+  }
+
+  .md\:gap-x-\[--sw-gap-x\] {
+    grid-column-gap: var(--sw-md-gap-x);
+    column-gap: var(--sw-md-gap-x);
+  }
+
+  .md\:gap-y-\[--sw-gap-y\] {
+    grid-row-gap: var(--sw-md-gap-y);
+    row-gap: var(--sw-md-gap-y);
+  }
+
+  .md\:col-start-\[--sw-col-start\] {
+    grid-column-start: var(--sw-md-col-start);
+  }
+
+  .md\:col-end-\[--sw-col-end\] {
+    grid-column-end: var(--sw-md-col-end);
+  }
+
+  .md\:row-start-\[--sw-row-start\] {
+    grid-row-start: var(--sw-md-row-start);
+  }
+
+  .md\:row-end-\[--sw-row-end\] {
+    grid-row-end: var(--sw-md-row-end);
+  }
+
+  .md\:ml-\[--sw-stack-margin-left\] {
+    margin-inline-start: var(--sw-md-stack-margin-left);
+  }
+
+  .md\:mt-\[--sw-stack-margin-top\] {
+    margin-block-start: var(--sw-md-stack-margin-top);
+  }
+
+  .md\:ml-\[--sw-stack-item-margin-left\] {
+    margin-inline-start: var(--sw-md-stack-item-margin-left);
+  }
+
+  .md\:mt-\[--sw-stack-item-margin-top\] {
+    margin-block-start: var(--sw-md-stack-item-margin-top);
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:grid-cols-\[--sw-grid-cols\] {
+    grid-template-columns: repeat(var(--sw-lg-grid-cols), minmax(0, 1fr));
+  }
+
+  .lg\:grid-rows-\[--sw-grid-rows\] {
+    grid-template-rows: repeat(var(--sw-lg-grid-rows), minmax(0, 1fr));
+  }
+
+  .lg\:gap-x-\[--sw-gap-x\] {
+    grid-column-gap: var(--sw-lg-gap-x);
+    column-gap: var(--sw-lg-gap-x);
+  }
+
+  .lg\:gap-y-\[--sw-gap-y\] {
+    grid-row-gap: var(--sw-lg-gap-y);
+    row-gap: var(--sw-lg-gap-y);
+  }
+
+  .lg\:col-start-\[--sw-col-start\] {
+    grid-column-start: var(--sw-lg-col-start);
+  }
+
+  .lg\:col-end-\[--sw-col-end\] {
+    grid-column-end: var(--sw-lg-col-end);
+  }
+
+  .lg\:row-start-\[--sw-row-start\] {
+    grid-row-start: var(--sw-lg-row-start);
+  }
+
+  .lg\:row-end-\[--sw-row-end\] {
+    grid-row-end: var(--sw-lg-row-end);
+  }
+
+  .lg\:ml-\[--sw-stack-margin-left\] {
+    margin-inline-start: var(--sw-lg-stack-margin-left);
+  }
+
+  .lg\:mt-\[--sw-stack-margin-top\] {
+    margin-block-start: var(--sw-lg-stack-margin-top);
+  }
+
+  .lg\:ml-\[--sw-stack-item-margin-left\] {
+    margin-inline-start: var(--sw-lg-stack-item-margin-left);
+  }
+
+  .lg\:mt-\[--sw-stack-item-margin-top\] {
+    margin-block-start: var(--sw-lg-stack-item-margin-top);
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:grid-cols-\[--sw-grid-cols\] {
+    grid-template-columns: repeat(var(--sw-xl-grid-cols), minmax(0, 1fr));
+  }
+
+  .xl\:grid-rows-\[--sw-grid-rows\] {
+    grid-template-rows: repeat(var(--sw-xl-grid-rows), minmax(0, 1fr));
+  }
+
+  .xl\:gap-x-\[--sw-gap-x\] {
+    grid-column-gap: var(--sw-xl-gap-x);
+    column-gap: var(--sw-xl-gap-x);
+  }
+
+  .xl\:gap-y-\[--sw-gap-y\] {
+    grid-row-gap: var(--sw-xl-gap-y);
+    row-gap: var(--sw-xl-gap-y);
+  }
+
+  .xl\:col-start-\[--sw-col-start\] {
+    grid-column-start: var(--sw-xl-col-start);
+  }
+
+  .xl\:col-end-\[--sw-col-end\] {
+    grid-column-end: var(--sw-xl-col-end);
+  }
+
+  .xl\:row-start-\[--sw-row-start\] {
+    grid-row-start: var(--sw-xl-row-start);
+  }
+
+  .xl\:row-end-\[--sw-row-end\] {
+    grid-row-end: var(--sw-xl-row-end);
+  }
+
+  .x\:ml-\[--sw-stack-margin-left\] {
+    margin-inline-start: var(--sw-xl-stack-margin-left);
+  }
+
+  .xl\:mt-\[--sw-stack-margin-top\] {
+    margin-block-start: var(--sw-xl-stack-margin-top);
+  }
+
+  .xl\:ml-\[--sw-stack-item-margin-left\] {
+    margin-inline-start: var(--sw-xl-stack-item-margin-left);
+  }
+
+  .xl\:mt-\[--sw-stack-item-margin-top\] {
+    margin-block-start: var(--sw-xl-stack-item-margin-top);
+  }
+}