1 | import {
|
2 | component_styles_default
|
3 | } from "./chunk.7IGWJVQF.js";
|
4 | import {
|
5 | r
|
6 | } from "./chunk.WWAD5WF4.js";
|
7 |
|
8 |
|
9 | var tooltip_styles_default = r`
|
10 | ${component_styles_default}
|
11 |
|
12 | :host {
|
13 | --max-width: 20rem;
|
14 | --hide-delay: 0ms;
|
15 | --show-delay: 150ms;
|
16 |
|
17 | display: contents;
|
18 | }
|
19 |
|
20 | .tooltip-target {
|
21 | display: contents;
|
22 | }
|
23 |
|
24 | .tooltip-positioner {
|
25 | position: absolute;
|
26 | z-index: var(--sl-z-index-tooltip);
|
27 | pointer-events: none;
|
28 | }
|
29 |
|
30 | .tooltip-positioner[data-placement^='top'] .tooltip {
|
31 | transform-origin: bottom;
|
32 | }
|
33 |
|
34 | .tooltip-positioner[data-placement^='bottom'] .tooltip {
|
35 | transform-origin: top;
|
36 | }
|
37 |
|
38 | .tooltip-positioner[data-placement^='left'] .tooltip {
|
39 | transform-origin: right;
|
40 | }
|
41 |
|
42 | .tooltip-positioner[data-placement^='right'] .tooltip {
|
43 | transform-origin: left;
|
44 | }
|
45 |
|
46 | .tooltip__content {
|
47 | max-width: var(--max-width);
|
48 | border-radius: var(--sl-tooltip-border-radius);
|
49 | background-color: var(--sl-tooltip-background-color);
|
50 | font-family: var(--sl-tooltip-font-family);
|
51 | font-size: var(--sl-tooltip-font-size);
|
52 | font-weight: var(--sl-tooltip-font-weight);
|
53 | line-height: var(--sl-tooltip-line-height);
|
54 | color: var(--sl-tooltip-color);
|
55 | padding: var(--sl-tooltip-padding);
|
56 | }
|
57 |
|
58 | .tooltip__arrow {
|
59 | position: absolute;
|
60 | background: var(--sl-tooltip-background-color);
|
61 | width: calc(var(--sl-tooltip-arrow-size) * 2);
|
62 | height: calc(var(--sl-tooltip-arrow-size) * 2);
|
63 | transform: rotate(45deg);
|
64 | z-index: -1;
|
65 | }
|
66 | `;
|
67 |
|
68 | export {
|
69 | tooltip_styles_default
|
70 | };
|