@sebgroup/green-core 3.30.0 → 3.32.0

package/components/tooltip/tooltip.styles.js

@@ -0,0 +1,120 @@
+import "../../chunks/chunk.H2T4A5YY.js";
+import { css } from "lit";
+const style = css`
+  @layer base {
+    :host {
+      --_max-width: 28ch;
+      --_padding-block: var(--gds-sys-space-2xs);
+      --_padding-inline: var(--gds-sys-space-s);
+      --_radius: var(--gds-sys-radius-max);
+      --_enter-duration: var(--gds-sys-motion-duration-fastest);
+      --_exit-duration: calc(var(--_enter-duration) / 2);
+      --_scale-from: 0.6;
+      /* Same zero-velocity curves as the indeterminate progress, so motion settles instead of stopping */
+      --_easing-lead: cubic-bezier(0.2, 0, 0.3, 1);
+      --_easing-trail: cubic-bezier(0.7, 0, 0.8, 1);
+
+      /* Reset the UA popover styles, the host is positioned by Floating UI */
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: inherit;
+      overflow: visible;
+      width: max-content;
+      height: auto;
+      pointer-events: auto;
+      /* Keeps the host rendered, and in the top layer, until the exit transition has finished */
+      transition:
+        display var(--_exit-duration) allow-discrete,
+        overlay var(--_exit-duration) allow-discrete;
+    }
+
+    :host(:not([open])) {
+      display: none;
+    }
+
+    /* Without the Popover API there is no top layer to render in */
+    @supports not selector(:popover-open) {
+      :host {
+        z-index: 1060;
+      }
+    }
+
+    .container {
+      box-sizing: border-box;
+      /* The text width stays the same when the padding grows on wrapped text */
+      max-inline-size: min(
+        calc(var(--_max-width) + 2 * var(--_padding-inline)),
+        calc(100vw - var(--gds-sys-space-m))
+      );
+      padding: var(--_padding-block) var(--_padding-inline);
+      border-radius: var(--_radius);
+      background-color: var(--gds-sys-color-l3-neutral-03);
+      color: var(--gds-sys-color-content-neutral-03);
+      font: var(--gds-sys-text-detail-s-regular);
+      overflow-wrap: break-word;
+    }
+
+    .container.multiline {
+      --_padding-block: var(--gds-sys-space-s);
+      --_padding-inline: var(--gds-sys-space-s);
+      --_radius: var(--gds-sys-radius-s);
+    }
+
+    /* The bubble grows from the edge that faces the trigger */
+    .side-top {
+      transform-origin: 50% 100%;
+    }
+    .side-bottom {
+      transform-origin: 50% 0;
+    }
+    .side-left {
+      transform-origin: 100% 50%;
+    }
+    .side-right {
+      transform-origin: 0 50%;
+    }
+
+    :host([open]) .container {
+      scale: 1;
+      opacity: 1;
+      transition:
+        scale var(--_enter-duration) var(--_easing-lead),
+        opacity var(--_enter-duration) var(--_easing-lead);
+    }
+
+    :host(:not([open])) .container {
+      scale: var(--_scale-from);
+      opacity: 0;
+      transition:
+        scale var(--_exit-duration) var(--_easing-trail),
+        opacity var(--_exit-duration) var(--_easing-trail);
+    }
+
+    @starting-style {
+      :host([open]) .container {
+        scale: var(--_scale-from);
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        --_scale-from: 1;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .container {
+        border: var(--gds-sys-space-5xs) solid CanvasText;
+      }
+    }
+  }
+`;
+var tooltip_styles_default = style;
+export {
+  tooltip_styles_default as default
+};