https://theroosevelt.net/webawesome/chunks/chunk.KLVPLM7W.js

1/*! Copyright 2026 Fonticons, Inc. - https://webawesome.com/license */
2import {
3  i
4} from "./chunk.7OBLIRXR.js";
5
6// _bundle_/src/components/popup/popup.styles.ts
7var popup_styles_default = i`
8  :host {
9    --arrow-color: black;
10    --arrow-size: var(--wa-tooltip-arrow-size);
11    --popup-border-width: 0px;
12    --show-duration: 100ms;
13    --hide-duration: 100ms;
14
15    /*
16     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
17     * 0.7071 is derived from sin(45) to calculate the length of the arrow after rotation.
18     *
19     * The diamond will be translated inward by --arrow-base-offset, the border thickness, to centralise it on
20     * the inner edge of the popup border. This also means we need to increase the size of the arrow by the
21     * same amount to compensate.
22     *
23     * A diamond shaped clipping mask is used to avoid overlap of popup content. This extends slightly inward so
24     * the popup border is covered with no sub-pixel rounding artifacts. The diamond corners are mitred at 22.5º
25     * to properly merge any arrow border with the popup border. The constant 1.4142 is derived from 1 + tan(22.5).
26     *
27     */
28    --arrow-base-offset: var(--popup-border-width);
29    --arrow-size-diagonal: calc((var(--arrow-size) + var(--arrow-base-offset)) * 0.7071);
30    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
31    --arrow-size-div: calc(var(--arrow-size-diagonal) * 2);
32    --arrow-clipping-corner: calc(var(--arrow-base-offset) * 1.4142);
33
34    display: contents;
35  }
36
37  .popup {
38    position: absolute;
39    isolation: isolate;
40    max-width: var(--auto-size-available-width, none);
41    max-height: var(--auto-size-available-height, none);
42
43    /* Clear UA styles for [popover] */
44    :where(&) {
45      inset: unset;
46      padding: unset;
47      margin: unset;
48      width: unset;
49      height: unset;
50      color: unset;
51      background: unset;
52      border: unset;
53      overflow: unset;
54    }
55  }
56
57  .popup-fixed {
58    position: fixed;
59  }
60
61  .popup:not(.popup-active) {
62    display: none;
63  }
64
65  .arrow {
66    position: absolute;
67    width: var(--arrow-size-div);
68    height: var(--arrow-size-div);
69    background: var(--arrow-color);
70    z-index: 3;
71    clip-path: polygon(
72      var(--arrow-clipping-corner) 100%,
73      var(--arrow-base-offset) calc(100% - var(--arrow-base-offset)),
74      calc(var(--arrow-base-offset) - 2px) calc(100% - var(--arrow-base-offset)),
75      calc(100% - var(--arrow-base-offset)) calc(var(--arrow-base-offset) - 2px),
76      calc(100% - var(--arrow-base-offset)) var(--arrow-base-offset),
77      100% var(--arrow-clipping-corner),
78      100% 100%
79    );
80    rotate: 45deg;
81  }
82
83  :host([data-current-placement|='left']) .arrow {
84    rotate: -45deg;
85  }
86
87  :host([data-current-placement|='right']) .arrow {
88    rotate: 135deg;
89  }
90
91  :host([data-current-placement|='bottom']) .arrow {
92    rotate: 225deg;
93  }
94
95  /* Hover bridge */
96  .popup-hover-bridge:not(.popup-hover-bridge-visible) {
97    display: none;
98  }
99
100  .popup-hover-bridge {
101    position: fixed;
102    z-index: 899;
103    top: 0;
104    right: 0;
105    bottom: 0;
106    left: 0;
107    clip-path: polygon(
108      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
109      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
110      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
111      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
112    );
113  }
114
115  /* Built-in animations */
116  .show {
117    animation: show var(--show-duration) ease;
118  }
119
120  .hide {
121    animation: show var(--hide-duration) ease reverse;
122  }
123
124  @keyframes show {
125    from {
126      opacity: 0;
127    }
128    to {
129      opacity: 1;
130    }
131  }
132
133  .show-with-scale {
134    animation: show-with-scale var(--show-duration) ease;
135  }
136
137  .hide-with-scale {
138    animation: show-with-scale var(--hide-duration) ease reverse;
139  }
140
141  @keyframes show-with-scale {
142    from {
143      opacity: 0;
144      scale: 0.8;
145    }
146    to {
147      opacity: 1;
148      scale: 1;
149    }
150  }
151`;
152
153export {
154  popup_styles_default
155};