1  .zt-format {
  2    border: 1px solid var(--background-modifier-border);
  3    padding: 1rem;
  4    background-color: var(--background-primary);
  5    border-radius: 10px;
  6    margin-bottom: 10px;
  7  }
  8  
  9  .zt-format__form {
 10    display: flex;
 11    flex-direction: column;
 12    align-items: stretch;
 13    margin-bottom: 1rem;
 14    max-width: 600px;
 15  }
 16  
 17  .zt-format__form:last-child {
 18    margin-bottom: 0;
 19  }
 20  
 21  .zt-format__label {
 22    font-size: 0.9em;
 23    font-weight: 600;
 24    margin-bottom: 5px;
 25  }
 26  
 27  .is-deprecated .zt-format__label {
 28    color: var(--text-error);
 29  }
 30  
 31  .zt-format__input-wrapper {
 32    display: flex;
 33    align-items: center;
 34  }
 35  
 36  .zt-format__input-wrapper textarea {
 37    resize: vertical;
 38  }
 39  
 40  .zt-format__input-wrapper > *:not(.checkbox-container) {
 41    width: 100% !important;
 42  }
 43  
 44  .is-deprecated .zt-format__input-wrapper button {
 45    width: auto !important;
 46    flex-grow: 0;
 47    flex-shrink: 0;
 48    margin-left: 5px;
 49  }
 50  
 51  .zt-format__delete-btn {
 52    display: flex;
 53    align-items: center;
 54    justify-content: center;
 55    line-height: 1;
 56    padding: 7px 9px;
 57    margin-left: 10px;
 58    flex-shrink: 0;
 59    flex-grow: 0;
 60  }
 61  
 62  .zt-json-viewer {
 63    font-size: 13px;
 64  }
 65  
 66  .zt-json-viewer .react-json-view {
 67    padding: 1em;
 68    border-radius: 10px;
 69    margin-top: 1em;
 70    overflow: auto;
 71    font-family: var(--font-monospace) !important;
 72  }
 73  
 74  .zt-json-viewer__btns {
 75    display: flex;
 76    align-items: center;
 77    justify-content: flex-start;
 78  }
 79  
 80  .zt-json-viewer__btns label {
 81    display: block;
 82    font-weight: bold;
 83    padding-top: 1em;
 84  }
 85  
 86  .zt-json-viewer__btns select {
 87    font-size: 1em;
 88  }
 89  
 90  .zt-json-viewer__btns button {
 91    font-size: 1em;
 92    margin-right: 5px;
 93  }
 94  
 95  .zt-json-viewer__preview,
 96  .zt-json-viewer__data {
 97    border: 1px solid var(--background-modifier-border);
 98    border-radius: 10px;
 99    padding: 1em;
100    margin-top: 1em;
101  }
102  
103  .zt-json-viewer__preview.error {
104    background-color: #ff000011;
105    font-family: var(--font-monospace);
106  }
107  
108  .zt-json-viewer__preview pre {
109    overflow: auto;
110    white-space: pre-wrap;
111    margin: 0;
112  }
113  
114  .zt-json-viewer__preview pre,
115  .zt-json-viewer__preview code {
116    font-family: inherit;
117  }
118  
119  .zt-json-viewer__preview:not(.error) pre {
120    font-family: var(--font-text, --font-default, --default-font);
121    max-height: 70vh;
122    min-height: 400px;
123  }
124  
125  .zt-multiselect {
126    width: 300px;
127    text-align: left;
128  }
129  
130  .zt-multiselect input {
131    outline: none !important;
132    box-shadow: none !important;
133  }
134  
135  .zt-format__input-note {
136    font-style: italic;
137    font-size: 0.9em;
138    padding-top: 10px;
139    margin-bottom: 10px;
140  }
141  
142  .zt-setting-item pre,
143  .zt-format__input-note pre {
144    display: inline-block;
145    margin: 0;
146    padding: 0 6px;
147    background-color: var(--background-secondary-alt);
148    border-radius: 4px;
149  }
150  
151  .zt-asset-success {
152    text-align: left;
153    display: flex;
154  }
155  
156  .zt-asset-success__icon {
157    color: var(--interactive-success);
158    font-size: 24px;
159    margin-right: 5px;
160  }
161  
162  .zt-asset-success__icon svg {
163    width: 1em !important;
164    height: 1em !important;
165  }
166  
167  .zt-asset-success__message {
168    font-size: 0.9em;
169  }
170  
171  .zt-suggest-title {
172    font-size: var(--font-ui-small);
173    color: var(--text-muted);
174    display: block;
175    overflow: hidden;
176    text-overflow: ellipsis;
177    white-space: nowrap;
178    padding-top: var(--size-4-1);
179  }
180  
181  .zt-suggest-loading-wrapper {
182    display: flex;
183    position: relative;
184    align-items: center;
185    justify-content: center;
186    padding: var(--size-4-2) 0;
187  }
188  
189  .zt-suggest-loading,
190  .zt-suggest-loading:before,
191  .zt-suggest-loading:after {
192    border-radius: 999px;
193    width: 1em;
194    height: 1em;
195    animation-fill-mode: both;
196    animation: bblFadInOut 1.6s infinite ease-in-out;
197  }
198  
199  .zt-suggest-loading {
200    display: block;
201    color: var(--text-muted);
202    font-size: 7px;
203    position: relative;
204    animation-delay: -0.16s;
205    top: -1em;
206  }
207  .zt-suggest-loading:before,
208  .zt-suggest-loading:after {
209    content: '';
210    position: absolute;
211  }
212  .zt-suggest-loading:before {
213    left: -2em;
214    animation-delay: -0.32s;
215  }
216  .zt-suggest-loading:after {
217    left: 2em;
218  }
219  
220  .zt-color-chip {
221    display: inline-block;
222    width: 1em;
223    height: 1em;
224    border: 1px solid var(--background-modifier-border);
225    border-radius: var(--radius-s);
226    margin-right: var(--size-4-1);
227  }
228  
229  @keyframes bblFadInOut {
230    0%,
231    80%,
232    100% {
233      box-shadow: 0 1em 0 -1.3em;
234    }
235    40% {
236      box-shadow: 0 1em 0 0;
237    }
238  }