tailjng 0.1.6 → 0.1.7

package/src/lib/components/tooltip/tooltip.service.ts

@@ -1,190 +1,388 @@
-import { Injectable, Renderer2, RendererFactory2 } from "@angular/core"
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { TOOLTIP_OPPOSITE, TooltipPosition } from './tooltip.types';
 
+export type { TooltipPosition } from './tooltip.types';
+
+/** Minimum margin from the viewport edge. */
+const VIEWPORT_MARGIN = 8;
+
+/** Gap between tooltip and anchor (includes arrow). */
+const TOOLTIP_GAP = 6;
+
+/** Default maximum tooltip width. */
+const DEFAULT_MAX_WIDTH = 230;
+
+/**
+ * Singleton service that creates and positions the floating tooltip in `document.body`.
+ */
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class JTooltipService {
-
   private readonly renderer: Renderer2;
 
   private tooltipElement: HTMLElement | null = null;
   private arrowElement: HTMLElement | null = null;
-  private showArrow = true;
 
+  private showArrow = true;
   private offsetX = 0;
   private offsetY = 0;
+  private autoFlip = true;
+
+  private currentTarget: HTMLElement | null = null;
+  private preferredPosition: TooltipPosition = 'top';
 
   constructor(rendererFactory: RendererFactory2) {
     this.renderer = rendererFactory.createRenderer(null, null);
   }
 
-
   /**
-   * Show the tooltip with the specified content, target element, position, arrow visibility, and offsets.
-   * @param content The content to display in the tooltip.
-   * @param target The target element to attach the tooltip to.
-   * @param position The position of the tooltip relative to the target element.
-   * @param showArrow Whether to show the arrow pointing to the target element.
-   * @param offsetX The horizontal offset of the tooltip.
-   * @param offsetY The vertical offset of the tooltip.
-   * @returns 
+   * Shows the tooltip anchored to the target element.
+   * @param content Tooltip text or HTML fragment.
+   * @param target Host element that triggers the tooltip.
+   * @param position Preferred position (may flip when `autoFlip` is true).
+   * @param showArrow Whether to show the arrow pointing at the anchor.
+   * @param offsetX Extra horizontal offset in px.
+   * @param offsetY Extra vertical offset in px.
+   * @param autoFlip When true, flips position when there is not enough space.
    */
   show(
     content: string | HTMLElement,
     target: HTMLElement,
-    position = "top",
+    position: TooltipPosition = 'top',
     showArrow = true,
     offsetX = 0,
     offsetY = 0,
+    autoFlip = true,
   ) {
-    if (!content || !target) return
+    if (!content || !target) {
+      return;
+    }
+
+    this.hide();
+    this.showArrow = showArrow;
+    this.offsetX = offsetX;
+    this.offsetY = offsetY;
+    this.autoFlip = autoFlip;
+    this.currentTarget = target;
+    this.preferredPosition = position;
 
-    this.hide()
-    this.showArrow = showArrow
-    this.offsetX = offsetX
-    this.offsetY = offsetY
+    this.ensureTooltipElement();
+    this.setContent(content);
+
+    if (this.showArrow && this.arrowElement) {
+      this.renderer.appendChild(this.tooltipElement!, this.arrowElement);
+    }
+
+    this.renderer.appendChild(document.body, this.tooltipElement!);
+    this.renderer.setStyle(this.tooltipElement, 'opacity', '0');
+    this.renderer.setStyle(this.tooltipElement, 'transform', 'scale(1)');
+    this.renderer.setStyle(this.tooltipElement, 'display', 'block');
+
+    requestAnimationFrame(() => {
+      this.applyPosition();
+      this.renderer.setStyle(this.tooltipElement!, 'opacity', '1');
+    });
+
+    window.addEventListener('scroll', this.repositionHandler, true);
+    window.addEventListener('resize', this.repositionHandler);
+  }
+
+  /**
+   * Hides the tooltip and removes global listeners.
+   */
+  hide() {
+    window.removeEventListener('scroll', this.repositionHandler, true);
+    window.removeEventListener('resize', this.repositionHandler);
+
+    this.currentTarget = null;
 
     if (!this.tooltipElement) {
-      this.tooltipElement = this.renderer.createElement("div")
-      this.renderer.addClass(this.tooltipElement, "j-tooltip")
-      this.renderer.setStyle(this.tooltipElement, "position", "absolute")
-      this.renderer.setStyle(this.tooltipElement, "z-index", "999999")
-      this.renderer.setStyle(this.tooltipElement, "background-color", "#333")
-      this.renderer.setStyle(this.tooltipElement, "color", "white")
-      this.renderer.setStyle(this.tooltipElement, "padding", "0.5rem")
-      this.renderer.setStyle(this.tooltipElement, "border-radius", "0.25rem")
-      this.renderer.setStyle(this.tooltipElement, "font-size", "0.875rem")
-      this.renderer.setStyle(this.tooltipElement, "pointer-events", "none")
-      this.renderer.setStyle(this.tooltipElement, "box-shadow", "0 2px 4px rgba(0,0,0,0.2)")
-      this.renderer.setStyle(this.tooltipElement, "max-width", "230px")
-      this.renderer.setStyle(this.tooltipElement, "word-wrap", "break-word")
-      this.renderer.setStyle(this.tooltipElement, "transition", "opacity 0.2s ease, transform 0.2s ease")
-
-      this.arrowElement = this.renderer.createElement("div")
-      this.renderer.setStyle(this.arrowElement, "position", "absolute")
-      this.renderer.setStyle(this.arrowElement, "width", "0")
-      this.renderer.setStyle(this.arrowElement, "height", "0")
-      this.renderer.setStyle(this.arrowElement, "border-style", "solid")
+      return;
     }
 
-    if (this.tooltipElement) {
-      while (this.tooltipElement.firstChild) {
-        this.tooltipElement.removeChild(this.tooltipElement.firstChild)
-      }
+    this.renderer.setStyle(this.tooltipElement, 'opacity', '0');
+    this.renderer.setStyle(this.tooltipElement, 'transform', 'scale(0.95)');
+    this.renderer.setStyle(this.tooltipElement, 'display', 'none');
+  }
+
+  /** Repositions on scroll/resize while the tooltip is visible. */
+  private repositionHandler = () => {
+    if (this.tooltipElement && this.currentTarget && this.isVisible()) {
+      this.applyPosition();
     }
+  };
 
-    if (typeof content === "string") {
-      this.tooltipElement!.textContent = content
-    } else if (content instanceof HTMLElement) {
-      this.renderer.appendChild(this.tooltipElement!, content.cloneNode(true))
+  /**
+   * Computes position, flip, viewport clamp, and arrow aligned to the anchor.
+   */
+  private applyPosition() {
+    if (!this.tooltipElement || !this.currentTarget) {
+      return;
     }
 
-    if (this.showArrow) {
-      this.renderer.appendChild(this.tooltipElement!, this.arrowElement!)
+    let placement = this.preferredPosition;
+    const targetRect = this.currentTarget.getBoundingClientRect();
+
+    this.constrainMaxWidth(placement, targetRect);
+
+    const tooltipRect = this.tooltipElement.getBoundingClientRect();
+
+    if (this.autoFlip) {
+      placement = this.resolvePlacement(targetRect, tooltipRect, placement);
+      this.constrainMaxWidth(placement, targetRect);
     }
 
-    this.renderer.appendChild(document.body, this.tooltipElement)
-    this.renderer.setStyle(this.tooltipElement, "opacity", "0")
-    this.renderer.setStyle(this.tooltipElement, "transform", "scale(1)")
-    this.renderer.setStyle(this.tooltipElement, "display", "block")
+    const { top, left } = this.calculateCoords(
+      targetRect,
+      this.tooltipElement.getBoundingClientRect(),
+      placement,
+    );
 
-    this.positionAbsolute(target, position)
+    this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+    this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
 
-    requestAnimationFrame(() => {
-      this.renderer.setStyle(this.tooltipElement!, "opacity", "1")
-    })
+    if (this.showArrow && this.arrowElement) {
+      this.positionArrow(
+        placement,
+        targetRect,
+        this.tooltipElement.getBoundingClientRect(),
+        left,
+        top,
+      );
+    }
   }
 
+  /**
+   * Reduces max-width when lateral space is smaller than the default.
+   * @param placement Current or candidate position.
+   * @param targetRect Anchor element bounding rect.
+   */
+  private constrainMaxWidth(placement: TooltipPosition, targetRect: DOMRect) {
+    if (!this.tooltipElement) {
+      return;
+    }
+
+    let maxWidth = DEFAULT_MAX_WIDTH;
 
+    if (placement === 'top' || placement === 'bottom') {
+      maxWidth = Math.min(maxWidth, window.innerWidth - VIEWPORT_MARGIN * 2);
+    } else if (placement === 'left') {
+      maxWidth = Math.min(maxWidth, targetRect.left - VIEWPORT_MARGIN - TOOLTIP_GAP);
+    } else {
+      maxWidth = Math.min(
+        maxWidth,
+        window.innerWidth - targetRect.right - VIEWPORT_MARGIN - TOOLTIP_GAP,
+      );
+    }
+
+    maxWidth = Math.max(80, maxWidth);
+    this.renderer.setStyle(this.tooltipElement, 'max-width', `${maxWidth}px`);
+  }
 
   /**
-   * Hide the tooltip if it is currently displayed.
-   * * This method sets the tooltip's opacity to 0, scales it down, and hides it from view.
-   * @returns
+   * Chooses the final position; flips when the preferred side does not fit.
+   * @param targetRect Anchor bounding rect.
+   * @param tooltipRect Tooltip bounding rect.
+   * @param preferred Requested position.
+   * @returns Effective position.
    */
-  hide() {
-    if (this.tooltipElement) {
-      this.renderer.setStyle(this.tooltipElement, "opacity", "0")
-      this.renderer.setStyle(this.tooltipElement, "transform", "scale(0.95)")
-      this.renderer.setStyle(this.tooltipElement, "display", "none")
+  private resolvePlacement(
+    targetRect: DOMRect,
+    tooltipRect: DOMRect,
+    preferred: TooltipPosition,
+  ): TooltipPosition {
+    if (this.fits(preferred, targetRect, tooltipRect)) {
+      return preferred;
+    }
+
+    const flipped = TOOLTIP_OPPOSITE[preferred];
+    if (this.fits(flipped, targetRect, tooltipRect)) {
+      return flipped;
     }
+
+    return preferred;
   }
 
+  /**
+   * Checks whether there is enough viewport space for the given position.
+   */
+  private fits(
+    placement: TooltipPosition,
+    targetRect: DOMRect,
+    tooltipRect: DOMRect,
+  ): boolean {
+    const needW = tooltipRect.width + TOOLTIP_GAP + VIEWPORT_MARGIN;
+    const needH = tooltipRect.height + TOOLTIP_GAP + VIEWPORT_MARGIN;
 
+    switch (placement) {
+      case 'top':
+        return targetRect.top >= needH;
+      case 'bottom':
+        return window.innerHeight - targetRect.bottom >= needH;
+      case 'left':
+        return targetRect.left >= needW;
+      case 'right':
+        return window.innerWidth - targetRect.right >= needW;
+    }
+  }
 
   /**
-   * Position the tooltip absolutely relative to the target element.
-   * @param target The target element to position the tooltip against.
-   * @param position The position of the tooltip (top, bottom, left, right).
-   * @returns
+   * Computes top/left in fixed coordinates and clamps them to the viewport.
    */
-  positionAbsolute(target: HTMLElement, position: string) {
-    if (!this.tooltipElement) return
+  private calculateCoords(
+    targetRect: DOMRect,
+    tooltipRect: DOMRect,
+    placement: TooltipPosition,
+  ): { top: number; left: number } {
+    let top = 0;
+    let left = 0;
 
-    const tooltipRect = this.tooltipElement.getBoundingClientRect()
-    const targetRect = target.getBoundingClientRect()
+    switch (placement) {
+      case 'top':
+        top = targetRect.top - tooltipRect.height - TOOLTIP_GAP;
+        left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case 'bottom':
+        top = targetRect.bottom + TOOLTIP_GAP;
+        left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case 'left':
+        top = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2;
+        left = targetRect.left - tooltipRect.width - TOOLTIP_GAP;
+        break;
+      case 'right':
+        top = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2;
+        left = targetRect.right + TOOLTIP_GAP;
+        break;
+    }
 
-    const arrowSize = 6
-    let left = 0
-    let top = 0
+    left += this.offsetX;
+    top += this.offsetY;
 
-    if (this.showArrow && this.arrowElement) {
-      this.renderer.setStyle(this.arrowElement, "border-width", `${arrowSize}px`)
-      this.renderer.setStyle(this.arrowElement, "border-color", "transparent")
-      this.renderer.setStyle(this.arrowElement, "top", "")
-      this.renderer.setStyle(this.arrowElement, "bottom", "")
-      this.renderer.setStyle(this.arrowElement, "left", "")
-      this.renderer.setStyle(this.arrowElement, "right", "")
-    }
-
-    switch (position) {
-      case "top":
-        left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2 + this.offsetX
-        top = targetRect.top - tooltipRect.height - arrowSize + this.offsetY
-        if (this.showArrow && this.arrowElement) {
-          this.renderer.setStyle(this.arrowElement, "bottom", `-5px`)
-          this.renderer.setStyle(this.arrowElement, "left", `calc(50% - ${arrowSize}px)`)
-          this.renderer.setStyle(this.arrowElement, "border-top-color", "#333")
-          this.renderer.setStyle(this.arrowElement, "border-bottom-width", "0")
-        }
-        break
-
-      case "bottom":
-        left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2 + this.offsetX
-        top = targetRect.bottom + arrowSize + this.offsetY
-        if (this.showArrow && this.arrowElement) {
-          this.renderer.setStyle(this.arrowElement, "top", `-5px`)
-          this.renderer.setStyle(this.arrowElement, "left", `calc(50% - ${arrowSize}px)`)
-          this.renderer.setStyle(this.arrowElement, "border-bottom-color", "#333")
-          this.renderer.setStyle(this.arrowElement, "border-top-width", "0")
-        }
-        break
-
-      case "left":
-        left = targetRect.left - tooltipRect.width - arrowSize + this.offsetX
-        top = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2 + this.offsetY
-        if (this.showArrow && this.arrowElement) {
-          this.renderer.setStyle(this.arrowElement, "right", `-5px`)
-          this.renderer.setStyle(this.arrowElement, "top", `calc(50% - ${arrowSize}px)`)
-          this.renderer.setStyle(this.arrowElement, "border-left-color", "#333")
-          this.renderer.setStyle(this.arrowElement, "border-right-width", "0")
-        }
-        break
-
-      case "right":
-        left = targetRect.right + arrowSize + this.offsetX
-        top = targetRect.top + targetRect.height / 2 - tooltipRect.height / 2 + this.offsetY
-        if (this.showArrow && this.arrowElement) {
-          this.renderer.setStyle(this.arrowElement, "left", `-5px`)
-          this.renderer.setStyle(this.arrowElement, "top", `calc(50% - ${arrowSize}px)`)
-          this.renderer.setStyle(this.arrowElement, "border-right-color", "#333")
-          this.renderer.setStyle(this.arrowElement, "border-left-width", "0")
-        }
-        break
-    }
-
-    this.renderer.setStyle(this.tooltipElement, "left", `${left + window.scrollX}px`)
-    this.renderer.setStyle(this.tooltipElement, "top", `${top + window.scrollY}px`)
+    left = Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(left, window.innerWidth - tooltipRect.width - VIEWPORT_MARGIN),
+    );
+    top = Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(top, window.innerHeight - tooltipRect.height - VIEWPORT_MARGIN),
+    );
+
+    return { top, left };
+  }
+
+  /**
+   * Positions the arrow toward the anchor center even when the tooltip was shifted.
+   */
+  private positionArrow(
+    placement: TooltipPosition,
+    targetRect: DOMRect,
+    tooltipRect: DOMRect,
+    tooltipLeft: number,
+    tooltipTop: number,
+  ) {
+    if (!this.arrowElement) {
+      return;
+    }
+
+    const arrowSize = 6;
+    this.renderer.setStyle(this.arrowElement, 'border-width', `${arrowSize}px`);
+    this.renderer.setStyle(this.arrowElement, 'border-color', 'transparent');
+    this.renderer.setStyle(this.arrowElement, 'top', '');
+    this.renderer.setStyle(this.arrowElement, 'bottom', '');
+    this.renderer.setStyle(this.arrowElement, 'left', '');
+    this.renderer.setStyle(this.arrowElement, 'right', '');
+    this.renderer.setStyle(this.arrowElement, 'transform', '');
+
+    const targetCenterX = targetRect.left + targetRect.width / 2;
+    const targetCenterY = targetRect.top + targetRect.height / 2;
+
+    const arrowPad = 10;
+    const arrowX = Math.max(
+      arrowPad,
+      Math.min(tooltipRect.width - arrowPad, targetCenterX - tooltipLeft),
+    );
+    const arrowY = Math.max(
+      arrowPad,
+      Math.min(tooltipRect.height - arrowPad, targetCenterY - tooltipTop),
+    );
+
+    switch (placement) {
+      case 'top':
+        this.renderer.setStyle(this.arrowElement, 'bottom', '-5px');
+        this.renderer.setStyle(this.arrowElement, 'left', `${arrowX - arrowSize}px`);
+        this.renderer.setStyle(this.arrowElement, 'border-top-color', '#333');
+        this.renderer.setStyle(this.arrowElement, 'border-bottom-width', '0');
+        break;
+      case 'bottom':
+        this.renderer.setStyle(this.arrowElement, 'top', '-5px');
+        this.renderer.setStyle(this.arrowElement, 'left', `${arrowX - arrowSize}px`);
+        this.renderer.setStyle(this.arrowElement, 'border-bottom-color', '#333');
+        this.renderer.setStyle(this.arrowElement, 'border-top-width', '0');
+        break;
+      case 'left':
+        this.renderer.setStyle(this.arrowElement, 'right', '-5px');
+        this.renderer.setStyle(this.arrowElement, 'top', `${arrowY - arrowSize}px`);
+        this.renderer.setStyle(this.arrowElement, 'border-left-color', '#333');
+        this.renderer.setStyle(this.arrowElement, 'border-right-width', '0');
+        break;
+      case 'right':
+        this.renderer.setStyle(this.arrowElement, 'left', '-5px');
+        this.renderer.setStyle(this.arrowElement, 'top', `${arrowY - arrowSize}px`);
+        this.renderer.setStyle(this.arrowElement, 'border-right-color', '#333');
+        this.renderer.setStyle(this.arrowElement, 'border-left-width', '0');
+        break;
+    }
+  }
+
+  /** Creates the tooltip DOM node if it does not exist yet. */
+  private ensureTooltipElement() {
+    if (this.tooltipElement) {
+      return;
+    }
+
+    this.tooltipElement = this.renderer.createElement('div');
+    this.renderer.addClass(this.tooltipElement, 'j-tooltip');
+    this.renderer.setStyle(this.tooltipElement, 'position', 'fixed');
+    this.renderer.setStyle(this.tooltipElement, 'z-index', '999999');
+    this.renderer.setStyle(this.tooltipElement, 'background-color', '#333');
+    this.renderer.setStyle(this.tooltipElement, 'color', 'white');
+    this.renderer.setStyle(this.tooltipElement, 'padding', '0.5rem');
+    this.renderer.setStyle(this.tooltipElement, 'border-radius', '0.25rem');
+    this.renderer.setStyle(this.tooltipElement, 'font-size', '0.875rem');
+    this.renderer.setStyle(this.tooltipElement, 'pointer-events', 'none');
+    this.renderer.setStyle(this.tooltipElement, 'box-shadow', '0 2px 4px rgba(0,0,0,0.2)');
+    this.renderer.setStyle(this.tooltipElement, 'max-width', `${DEFAULT_MAX_WIDTH}px`);
+    this.renderer.setStyle(this.tooltipElement, 'word-wrap', 'break-word');
+    this.renderer.setStyle(this.tooltipElement, 'transition', 'opacity 0.2s ease, transform 0.2s ease');
+
+    this.arrowElement = this.renderer.createElement('div');
+    this.renderer.setStyle(this.arrowElement, 'position', 'absolute');
+    this.renderer.setStyle(this.arrowElement, 'width', '0');
+    this.renderer.setStyle(this.arrowElement, 'height', '0');
+    this.renderer.setStyle(this.arrowElement, 'border-style', 'solid');
+  }
+
+  /** Inserts text or HTML into the tooltip. */
+  private setContent(content: string | HTMLElement) {
+    if (!this.tooltipElement) {
+      return;
+    }
+
+    while (this.tooltipElement.firstChild) {
+      this.tooltipElement.removeChild(this.tooltipElement.firstChild);
+    }
+
+    if (typeof content === 'string') {
+      this.tooltipElement.textContent = content;
+    } else {
+      this.renderer.appendChild(this.tooltipElement, content.cloneNode(true));
+    }
   }
 
+  /** @returns true when the tooltip is visible on screen. */
+  private isVisible(): boolean {
+    return this.tooltipElement?.style.display === 'block';
+  }
 }

package/src/lib/components/tooltip/tooltip.types.ts

@@ -0,0 +1,9 @@
+/** Preferred tooltip position relative to the anchor element. */
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export const TOOLTIP_OPPOSITE: Record<TooltipPosition, TooltipPosition> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+};

package/src/lib/components/viewer/viewer-image/image-viewer.component.css

@@ -1,4 +1,90 @@
-img {
-    -webkit-user-drag: none; /* Safari y Chrome */
-    user-select: none;       /* Evita selección de texto */
-}
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.j-image-viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.j-image-viewer__toolbar {
+  position: absolute;
+  z-index: 20;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25rem;
+  max-width: calc(100% - 1rem);
+}
+
+.j-image-viewer__stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+.j-image-viewer__stage--fullscreen {
+  background-color: var(--color-background);
+}
+
+:host-context(.dark) .j-image-viewer__stage--fullscreen,
+:host-context(html.dark) .j-image-viewer__stage--fullscreen {
+  background-color: var(--color-dark-background);
+}
+
+.j-image-viewer__canvas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.j-image-viewer__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.j-image-viewer__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.j-image-viewer__overlay--loading {
+  background-color: color-mix(in srgb, var(--color-background) 70%, transparent);
+}
+
+:host-context(.dark) .j-image-viewer__overlay--loading,
+:host-context(html.dark) .j-image-viewer__overlay--loading {
+  background-color: color-mix(in srgb, var(--color-dark-background) 55%, transparent);
+}
+
+.j-image-viewer__message {
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: var(--color-muted-foreground);
+}
+
+:host-context(.dark) .j-image-viewer__message,
+:host-context(html.dark) .j-image-viewer__message {
+  color: var(--color-dark-muted-foreground);
+}
+
+.j-image-viewer__message--error {
+  color: var(--color-destructive);
+}