@xlabs-store/core 0.0.1

package/dist/collection/components/x-image/x-image.css

@@ -0,0 +1,556 @@
+@charset "UTF-8";
+:root {
+  /** Primary Colors **/
+  --x-color-primary: #1677ff;
+  --x-color-primary-rgb: 22, 119, 255;
+  --x-color-primary-contrast: #ffffff;
+  --x-color-primary-contrast-rgb: 255, 255, 255;
+  --x-color-primary-shade: #0958d9;
+  --x-color-primary-tint: #4096ff;
+  --x-color-primary-bg: #e6f4ff;
+  --x-color-primary-bg-hover: #bae0ff;
+  --x-color-primary-border: #91caff;
+  --x-color-primary-border-hover: #69b1ff;
+  --x-color-primary-hover: #4096ff;
+  --x-color-primary-active: #0958d9;
+  --x-color-primary-text: #1677ff;
+  --x-color-primary-text-hover: #4096ff;
+  --x-color-primary-text-active: #0958d9;
+  /** Secondary Colors **/
+  --x-color-secondary: #3dc2ff;
+  --x-color-secondary-rgb: 61, 194, 255;
+  --x-color-secondary-contrast: #ffffff;
+  --x-color-secondary-contrast-rgb: 255, 255, 255;
+  --x-color-secondary-shade: #36abe0;
+  --x-color-secondary-tint: #50c8ff;
+  /** Success Colors **/
+  --x-color-success: #52c41a;
+  --x-color-success-rgb: 82, 196, 26;
+  --x-color-success-contrast: #ffffff;
+  --x-color-success-contrast-rgb: 255, 255, 255;
+  --x-color-success-shade: #389e0d;
+  --x-color-success-tint: #73d13d;
+  --x-color-success-bg: #f6ffed;
+  --x-color-success-bg-hover: #d9f7be;
+  --x-color-success-border: #b7eb8f;
+  --x-color-success-border-hover: #95de64;
+  --x-color-success-hover: #73d13d;
+  --x-color-success-active: #389e0d;
+  --x-color-success-text: #52c41a;
+  --x-color-success-text-hover: #73d13d;
+  --x-color-success-text-active: #389e0d;
+  /** Warning Colors **/
+  --x-color-warning: #faad14;
+  --x-color-warning-rgb: 250, 173, 20;
+  --x-color-warning-contrast: #000000;
+  --x-color-warning-contrast-rgb: 0, 0, 0;
+  --x-color-warning-shade: #d48806;
+  --x-color-warning-tint: #ffc53d;
+  --x-color-warning-bg: #fffbe6;
+  --x-color-warning-bg-hover: #fff1b8;
+  --x-color-warning-border: #ffe58f;
+  --x-color-warning-border-hover: #ffd666;
+  --x-color-warning-hover: #ffc53d;
+  --x-color-warning-active: #d48806;
+  --x-color-warning-text: #faad14;
+  --x-color-warning-text-hover: #ffc53d;
+  --x-color-warning-text-active: #d48806;
+  /** Danger/Error Colors **/
+  --x-color-danger: #ff4d4f;
+  --x-color-danger-rgb: 255, 77, 79;
+  --x-color-danger-contrast: #ffffff;
+  --x-color-danger-contrast-rgb: 255, 255, 255;
+  --x-color-danger-shade: #cf1322;
+  --x-color-danger-tint: #ff7875;
+  --x-color-error: #ff4d4f;
+  --x-color-error-rgb: 255, 77, 79;
+  --x-color-error-bg: #fff2f0;
+  --x-color-error-bg-hover: #ffccc7;
+  --x-color-error-border: #ffa39e;
+  --x-color-error-border-hover: #ff7875;
+  --x-color-error-hover: #ff7875;
+  --x-color-error-active: #d9363e;
+  --x-color-error-text: #ff4d4f;
+  --x-color-error-text-hover: #ff7875;
+  --x-color-error-text-active: #d9363e;
+  /** Info Colors **/
+  --x-color-info: #1677ff;
+  --x-color-info-rgb: 22, 119, 255;
+  --x-color-info-bg: #e6f4ff;
+  --x-color-info-bg-hover: #bae0ff;
+  --x-color-info-border: #91caff;
+  --x-color-info-border-hover: #69b1ff;
+  --x-color-info-hover: #69b1ff;
+  --x-color-info-active: #0958d9;
+  --x-color-info-text: #1677ff;
+  --x-color-info-text-hover: #69b1ff;
+  --x-color-info-text-active: #0958d9;
+  /** Text Colors **/
+  --x-color-text: rgba(0, 0, 0, 0.88);
+  --x-color-text-secondary: rgba(0, 0, 0, 0.65);
+  --x-color-text-tertiary: rgba(0, 0, 0, 0.45);
+  --x-color-text-quaternary: rgba(0, 0, 0, 0.25);
+  --x-color-text-disabled: rgba(0, 0, 0, 0.25);
+  --x-color-text-placeholder: rgba(0, 0, 0, 0.25);
+  --x-color-text-heading: rgba(0, 0, 0, 0.88);
+  --x-color-text-label: rgba(0, 0, 0, 0.65);
+  --x-color-text-description: rgba(0, 0, 0, 0.45);
+  --x-color-text-light-solid: #ffffff;
+  /** Background Colors **/
+  --x-color-bg-container: #ffffff;
+  --x-color-bg-elevated: #ffffff;
+  --x-color-bg-layout: #f5f5f5;
+  --x-color-bg-spotlight: rgba(0, 0, 0, 0.85);
+  --x-color-bg-mask: rgba(0, 0, 0, 0.45);
+  --x-color-bg-base: #ffffff;
+  --x-color-bg-container-disabled: #f5f5f5;
+  --x-color-bg-container-loading: rgba(255, 255, 255, 0.65);
+  /** Common Colors **/
+  --x-color-white: #ffffff;
+  /** Fill Colors **/
+  --x-color-fill: rgba(0, 0, 0, 0.15);
+  --x-color-fill-secondary: rgba(0, 0, 0, 0.06);
+  --x-color-fill-tertiary: rgba(0, 0, 0, 0.04);
+  --x-color-fill-quaternary: rgba(0, 0, 0, 0.02);
+  /** Border Colors **/
+  --x-color-border: #d9d9d9;
+  --x-color-border-secondary: #f0f0f0;
+  --x-color-border-bg: #ffffff;
+  /** Split/Divider Colors **/
+  --x-color-split: rgba(5, 5, 5, 0.06);
+  /** Dark/Medium/Light - Legacy support **/
+  --x-color-dark: #222428;
+  --x-color-dark-rgb: 34, 36, 40;
+  --x-color-dark-contrast: #ffffff;
+  --x-color-dark-contrast-rgb: 255, 255, 255;
+  --x-color-dark-shade: #1e2023;
+  --x-color-dark-tint: #383a3e;
+  --x-color-medium: #92949c;
+  --x-color-medium-rgb: 146, 148, 156;
+  --x-color-medium-contrast: #ffffff;
+  --x-color-medium-contrast-rgb: 255, 255, 255;
+  --x-color-medium-shade: #808289;
+  --x-color-medium-tint: #9d9fa6;
+  --x-color-light: #f4f5f8;
+  --x-color-light-rgb: 244, 245, 248;
+  --x-color-light-contrast: #000000;
+  --x-color-light-contrast-rgb: 0, 0, 0;
+  --x-color-light-shade: #d7d8da;
+  --x-color-light-tint: #f5f6f9;
+  /** Font Family **/
+  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  /** Font Sizes **/
+  --x-font-size: 14px;
+  --x-font-size-sm: 12px;
+  --x-font-size-lg: 16px;
+  --x-font-size-xl: 20px;
+  /** Heading Font Sizes **/
+  --x-font-size-heading-1: 38px;
+  --x-font-size-heading-2: 30px;
+  --x-font-size-heading-3: 24px;
+  --x-font-size-heading-4: 20px;
+  --x-font-size-heading-5: 16px;
+  /** Line Heights **/
+  --x-line-height: 1.5714285714285714;
+  --x-line-height-lg: 1.5;
+  --x-line-height-sm: 1.6666666666666667;
+  --x-line-height-heading-1: 1.2105263157894737;
+  --x-line-height-heading-2: 1.2666666666666666;
+  --x-line-height-heading-3: 1.3333333333333333;
+  --x-line-height-heading-4: 1.4;
+  --x-line-height-heading-5: 1.5;
+  /** Font Weight **/
+  --x-font-weight-normal: 400;
+  --x-font-weight-medium: 500;
+  --x-font-weight-semibold: 600;
+  --x-font-weight-strong: 600;
+  /** Additional Font Sizes **/
+  --x-font-size-base: 14px;
+  --x-font-size-xxl: 24px;
+  /** Additional Line Heights **/
+  --x-line-height-base: 1.5714285714285714;
+  --x-spacing-xxs: 4px;
+  --x-spacing-xs: 8px;
+  --x-spacing-sm: 12px;
+  --x-spacing-md: 16px;
+  --x-spacing-lg: 20px;
+  --x-spacing-xl: 24px;
+  --x-spacing-xxl: 32px;
+  --x-spacing-xxxl: 48px;
+  /** Margin/Padding shortcuts **/
+  --x-margin-xxs: 4px;
+  --x-margin-xs: 8px;
+  --x-margin-sm: 12px;
+  --x-margin-md: 16px;
+  --x-margin-lg: 24px;
+  --x-margin-xl: 32px;
+  --x-margin-xxl: 48px;
+  --x-padding-xxs: 4px;
+  --x-padding-xs: 8px;
+  --x-padding-sm: 12px;
+  --x-padding-md: 16px;
+  --x-padding-lg: 24px;
+  --x-padding-content-horizontal-lg: 24px;
+  --x-padding-content-vertical-lg: 12px;
+  --x-padding-content-horizontal: 16px;
+  --x-padding-content-vertical: 12px;
+  --x-padding-content-horizontal-sm: 16px;
+  --x-padding-content-vertical-sm: 8px;
+  --x-border-radius: 6px;
+  --x-border-radius-xs: 2px;
+  --x-border-radius-sm: 4px;
+  --x-border-radius-lg: 8px;
+  --x-border-radius-xl: 12px;
+  --x-border-radius-outer: 4px;
+  --x-border-radius-base: 6px;
+  --x-border-width: 1px;
+  --x-border-width-base: 1px;
+  --x-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --x-shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --x-box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+  --x-box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
+  --x-box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
+  --x-box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);
+  --x-box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);
+  --x-motion-duration-fast: 0.1s;
+  --x-motion-duration-mid: 0.2s;
+  --x-motion-duration-slow: 0.3s;
+  --x-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --x-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --x-motion-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --x-motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  --x-motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  --x-motion-ease-in-out-circle: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  --x-motion-ease-out-circle: cubic-bezier(0.08, 0.82, 0.17, 1);
+  --x-motion-ease-in-circle: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  --x-motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --x-motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --x-z-index-base: 0;
+  --x-z-index-popup-base: 1000;
+  --x-z-index-popup: 1030;
+  --x-z-index-affix: 10;
+  --x-z-index-modal: 1000;
+  --x-z-index-modal-mask: 1000;
+  --x-z-index-drawer: 1000;
+  --x-z-index-popover: 1030;
+  --x-z-index-dropdown: 1050;
+  --x-z-index-tooltip: 1070;
+  --x-z-index-notification: 1080;
+  --x-z-index-message: 1090;
+  --x-z-index-popconfirm: 1060;
+  --x-z-index-table-fixed: 10;
+  --x-opacity-loading: 0.65;
+  --x-opacity-image: 1;
+  --x-opacity-disabled: 0.5;
+  --x-control-height: 32px;
+  --x-control-height-xs: 24px;
+  --x-control-height-sm: 24px;
+  --x-control-height-lg: 40px;
+  --x-control-radio-size: 16px;
+  --x-control-checkbox-size: 16px;
+  --x-control-padding-horizontal: 12px;
+  --x-control-padding-horizontal-sm: 8px;
+  --x-control-outline-width: 2px;
+  --x-control-outline: rgba(5, 145, 255, 0.1);
+  --x-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+  --x-control-item-bg-active: #e6f4ff;
+  --x-control-item-bg-active-hover: #bae0ff;
+  --x-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+  --x-control-tmp-outline: rgba(0, 0, 0, 0.02);
+  --x-color-yellow: #fadb14;
+  --x-color-yellow-rgb: 250, 219, 20;
+  --x-font-family-base: var(--x-font-family);
+  --x-color-link: #1677ff;
+  --x-color-link-hover: #69b1ff;
+  --x-color-link-active: #0958d9;
+  --x-color-icon: rgba(0, 0, 0, 0.45);
+  --x-color-icon-hover: rgba(0, 0, 0, 0.88);
+  --x-color-highlight: #ff4d4f;
+  --x-color-bg-text-hover: rgba(0, 0, 0, 0.06);
+  --x-color-bg-text-active: rgba(0, 0, 0, 0.15);
+  --x-screen-xs: 480px;
+  --x-screen-xs-min: 480px;
+  --x-screen-xs-max: 575px;
+  --x-screen-sm: 576px;
+  --x-screen-sm-min: 576px;
+  --x-screen-sm-max: 767px;
+  --x-screen-md: 768px;
+  --x-screen-md-min: 768px;
+  --x-screen-md-max: 991px;
+  --x-screen-lg: 992px;
+  --x-screen-lg-min: 992px;
+  --x-screen-lg-max: 1199px;
+  --x-screen-xl: 1200px;
+  --x-screen-xl-min: 1200px;
+  --x-screen-xl-max: 1599px;
+  --x-screen-xxl: 1600px;
+  --x-screen-xxl-min: 1600px;
+  --x-color-fill-content: rgba(0, 0, 0, 0.06);
+  --x-color-fill-content-hover: rgba(0, 0, 0, 0.15);
+  --x-color-fill-alter: rgba(0, 0, 0, 0.02);
+  --x-scrollbar-width: 12px;
+  --x-scrollbar-track-bg: rgba(0, 0, 0, 0.04);
+  --x-scrollbar-thumb-bg: rgba(0, 0, 0, 0.25);
+  --x-scrollbar-thumb-bg-hover: rgba(0, 0, 0, 0.35);
+  --x-menu-dark-bg: #001529;
+  --x-menu-dark-item-bg: #001529;
+  --x-menu-dark-popup-bg: #001529;
+  --x-menu-dark-submenu-item-bg: #000c17;
+}
+
+/**
+* X-Image Component Variables
+* 
+* Sass variables for x-image component
+* Resolution priority: x-image → ref (x-*)
+* 
+* Usage: Import this file in x-image.scss
+* @use './variables' as *;
+*/
+/**
+ * X-Image Component Styles
+ * Following Ant Design specification
+ */
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.x-image {
+  position: relative;
+  display: inline-block;
+}
+.x-image.x-image-error .x-image-img {
+  cursor: default;
+}
+.x-image.x-image-error .x-image-mask {
+  display: none;
+}
+
+/* ========================================
+ * MAIN IMAGE
+ * ======================================== */
+.x-image-img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  object-fit: cover;
+  cursor: pointer;
+  border-radius: var(--x-image-border-radius, 0);
+  transition: opacity var(--x-image-motion-duration, 0.3s);
+}
+.x-image-img.x-image-img-loading {
+  opacity: 0;
+}
+
+/* ========================================
+ * PLACEHOLDER
+ * ======================================== */
+.x-image-placeholder {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.x-image-placeholder-default {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
+  background-size: 400% 100%;
+  animation: x-image-placeholder-skeleton 1.4s ease infinite;
+}
+
+@keyframes x-image-placeholder-skeleton {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+/* ========================================
+ * PREVIEW MASK (ON IMAGE)
+ * ======================================== */
+.x-image-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--x-image-mask-color, #fff);
+  background: var(--x-image-mask-bg, rgba(0, 0, 0, 0.5));
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--x-image-motion-duration, 0.3s);
+  border-radius: var(--x-image-border-radius, 0);
+}
+.x-image-mask:hover {
+  opacity: 1;
+}
+
+.x-image-mask-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--x-image-mask-font-size, 14px);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0 4px;
+}
+
+.x-image-mask-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.x-image-mask-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* ========================================
+ * PREVIEW MODAL
+ * ======================================== */
+.x-image-preview {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--x-image-preview-z-index, 1080);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+}
+
+.x-image-preview-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  background: var(--x-image-preview-mask-bg, rgba(0, 0, 0, 0.45));
+}
+
+.x-image-preview-wrap {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Close Button */
+.x-image-preview-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: var(--x-image-preview-operation-color, rgba(255, 255, 255, 0.85));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color var(--x-image-motion-duration, 0.3s);
+}
+.x-image-preview-close:hover {
+  color: var(--x-image-preview-operation-hover-color, #fff);
+}
+.x-image-preview-close svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ========================================
+ * TOOLBAR
+ * ======================================== */
+.x-image-preview-operations {
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--x-image-preview-operations-z-index, 1);
+  display: flex;
+  align-items: center;
+  padding: 12px 24px;
+  background: var(--x-image-preview-operation-bg, rgba(0, 0, 0, 0.1));
+  border-radius: 100px;
+}
+
+.x-image-preview-operation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  margin: var(--x-image-preview-operation-margin, 0 12px);
+  color: var(--x-image-preview-operation-color, rgba(255, 255, 255, 0.85));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--x-image-motion-duration, 0.3s);
+  border-radius: 4px;
+}
+.x-image-preview-operation:hover {
+  color: var(--x-image-preview-operation-hover-color, #fff);
+  background: rgba(255, 255, 255, 0.1);
+}
+.x-image-preview-operation:disabled {
+  color: var(--x-image-preview-operation-disabled-color, rgba(255, 255, 255, 0.25));
+  cursor: not-allowed;
+}
+.x-image-preview-operation svg {
+  width: var(--x-image-preview-operation-size, 18px);
+  height: var(--x-image-preview-operation-size, 18px);
+}
+
+/* ========================================
+ * PREVIEW IMAGE
+ * ======================================== */
+.x-image-preview-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.x-image-preview-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  cursor: grab;
+  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  user-select: none;
+}
+.x-image-preview-img:active {
+  cursor: grabbing;
+}