1const style = `
2[data-expoimage] .cross-dissolve {
3  transition-property: opacity;
4  animation-fill-mode: forwards;
5}
6[data-expoimage] .cross-dissolve-start:not(.transitioning) {
7  opacity: 0;
8}
9[data-expoimage] .cross-dissolve-active {
10  opacity: 1;
11}
12[data-expoimage] .cross-dissolve-end {
13  opacity: 0;
14}
15[data-expoimage] .flip-from-left {
16  transition-property: transform, opacity;
17  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
18  transform-origin: center;
19
20}
21[data-expoimage] .flip-from-left-container {
22  width: 100%;
23  height: 100%;
24  position: absolute;
25  left: 0;
26  top: 0;
27  perspective: 1000px;
28}
29[data-expoimage] .flip-from-left-start:not(.transitioning) {
30  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(-180deg);
31  opacity: 0;
32}
33[data-expoimage] .flip-from-left-active {
34  transform: translateZ(0px) rotateY(0) ;
35  opacity:1;
36}
37[data-expoimage] .flip-from-left-end {
38  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(180deg);
39  opacity: 0;
40}
41[data-expoimage] .flip-from-right {
42  transition-property: transform, opacity;
43  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
44  transform-origin: center;
45}
46[data-expoimage] .flip-from-right-container {
47  width: 100%;
48  height: 100%;
49  position: absolute;
50  left: 0;
51  top: 0;
52  perspective: 1000px;
53}
54[data-expoimage] .flip-from-right-start:not(.transitioning) {
55  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(180deg);
56  opacity: 0;
57}
58[data-expoimage] .flip-from-right-active {
59  transform: translateZ(0px) rotateY(0) ;
60  opacity:1;
61}
62[data-expoimage] .flip-from-right-end {
63  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(-180deg);
64  opacity: 0;
65}
66[data-expoimage] .flip-from-top {
67  transition-property: transform, opacity;
68  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
69  transform-origin: center;
70}
71[data-expoimage] .flip-from-top-container {
72  width: 100%;
73  height: 100%;
74  position: absolute;
75  left: 0;
76  top: 0;
77  perspective: 1000px;
78}
79[data-expoimage] .flip-from-top-start:not(.transitioning) {
80  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.5)) rotateX(180deg);
81  opacity: 0;
82}
83[data-expoimage] .flip-from-top-active {
84  transform: translateZ(0px) rotateX(0) ;
85  opacity:1;
86}
87[data-expoimage] .flip-from-top-end {
88  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.5)) rotateX(-180deg);
89  opacity: 0;
90}
91[data-expoimage] .flip-from-bottom {
92  transition-property: transform, opacity;
93  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
94  transform-origin: center;
95}
96[data-expoimage] .flip-from-bottom-container {
97  width: 100%;
98  height: 100%;
99  position: absolute;
100  left: 0;
101  top: 0;
102  perspective: 1000px;
103}
104[data-expoimage] .flip-from-bottom-start:not(.transitioning) {
105  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.25)) rotateX(-180deg);
106  opacity: 0;
107}
108[data-expoimage] .flip-from-bottom-active {
109  transform: translateZ(0px) rotateX(0) ;
110  opacity:1;
111}
112[data-expoimage] .flip-from-bottom-end {
113  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.25)) rotateX(180deg);
114  opacity: 0;
115}
116[data-expoimage] .image-timing-linear {
117  --expo-image-timing: linear;
118}
119[data-expoimage] .image-timing-ease-in {
120  --expo-image-timing: ease-in;
121}
122[data-expoimage] .image-timing-ease-out {
123  --expo-image-timing: ease-out;
124}
125[data-expoimage] .image-timing-ease-in-out {
126  --expo-image-timing: ease-in-out;
127}
128`;
129export default function loadStyle() {
130  if (typeof document !== 'undefined') {
131    const styleTag = document.createElement('style');
132    styleTag.innerHTML = style;
133    styleTag.id = 'expo-image-styles';
134    document.head.appendChild(styleTag);
135  }
136}
137