UNPKG

32.9 kBCSSView Raw
1
2.next-sr-only {
3 position: absolute;
4 width: 1px;
5 height: 1px;
6 padding: 0;
7 overflow: hidden;
8 clip: rect(0, 0, 0, 0);
9 white-space: nowrap;
10 border: 0;
11 top: 0;
12 margin: -1px; }
13
14.next-tabs {
15 /* Nav Button */
16 /* ----------------- */
17 /* position: vertical */
18 /* ----------------- */
19 /* Size */
20 /* ----------------- */
21 /* shape: pure */
22 /* ----------------- */
23 /* Shape: wrapped */
24 /* --------------------- */
25 /* Shape: wrapped(top) */
26 /* Shape: wrapped(bottom) */
27 /* Shape: wrapped(left) */
28 /* Shape: wrapped(right) */
29 /* Shape: text */
30 /* ------------------- */ }
31 .next-tabs {
32 box-sizing: border-box;
33 width: 100%; }
34 .next-tabs *,
35 .next-tabs *:before,
36 .next-tabs *:after {
37 box-sizing: border-box; }
38 .next-tabs-bar {
39 outline: none; }
40 .next-tabs-bar-popup {
41 overflow-y: auto;
42 max-height: 480px; }
43 .next-tabs-nav-container {
44 position: relative; }
45 .next-tabs-nav-container:after {
46 visibility: hidden;
47 display: block;
48 height: 0;
49 font-size: 0;
50 content: '\0020';
51 clear: both; }
52 .next-tabs-nav-wrap {
53 overflow: hidden; }
54 .next-tabs-nav-scroll {
55 overflow: hidden;
56 white-space: nowrap; }
57 .next-tabs-scrollable .next-tabs-nav-scroll {
58 overflow-x: auto;
59 overflow-y: hidden;
60 -webkit-overflow-scrolling: touch; }
61 .next-tabs-scrollable .next-tabs-nav-scroll::-webkit-scrollbar {
62 display: none !important;
63 width: 0 !important;
64 height: 0 !important;
65 -webkit-appearance: none;
66 opacity: 0 !important; }
67 .next-tabs-nav {
68 display: inline-block;
69 position: relative;
70 transition: all 300ms ease;
71 transition: all var(--motion-duration-standard, 300ms) var(--motion-ease, ease);
72 list-style: none;
73 padding: 0;
74 margin: 0; }
75 .next-tabs-nav-enter, .next-tabs-nav-appear {
76 animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86);
77 animation-fill-mode: both; }
78 .next-tabs-nav-leave {
79 animation: fadeOutLeft 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
80 animation-fill-mode: both; }
81 .next-tabs-nav.next-disable-animation .next-tabs-tab:before {
82 transition: none; }
83 .next-tabs-tab {
84 display: inline-block;
85 position: relative;
86 transition: all 100ms linear;
87 transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear); }
88 .next-tabs-tab-inner {
89 position: relative;
90 cursor: pointer;
91 text-decoration: none; }
92 .next-tabs-tab:before {
93 content: "";
94 position: absolute;
95 transition: all 300ms ease;
96 transition: all var(--motion-duration-standard, 300ms) var(--motion-ease, ease); }
97 .next-tabs-tab.active {
98 font-weight: normal;
99 font-weight: var(--tab-item-font-weight-selected, normal); }
100 .next-tabs-tab .next-tabs-tab-close {
101 color: #666666;
102 color: var(--tab-close-icon-color, #666666); }
103 .next-tabs-tab .next-tabs-tab-close:hover {
104 color: #333333;
105 color: var(--tab-close-icon-color-hover, #333333); }
106 .next-tabs-tab .next-tabs-tab-close:focus {
107 outline: none; }
108 .next-tabs-tab.active .next-tabs-tab-close {
109 color: #5584FF;
110 color: var(--tab-close-icon-color-selected, #5584FF); }
111 .next-tabs-tab.disabled .next-tabs-tab-close {
112 color: #DCDEE3;
113 color: var(--tab-close-icon-color-disabled, #DCDEE3); }
114 .next-tabs-tab:focus {
115 outline: none; }
116 .next-tabs-tabpane {
117 visibility: hidden;
118 opacity: 0; }
119 .next-tabs-tabpane.active {
120 visibility: visible;
121 opacity: 1;
122 height: auto; }
123 .next-tabs-tabpane.hidden {
124 overflow: hidden;
125 height: 0 !important;
126 margin: 0 !important;
127 padding: 0 !important;
128 border: 0 !important; }
129 .next-tabs-btn-down, .next-tabs-btn-prev, .next-tabs-btn-next {
130 position: absolute;
131 top: 0;
132 cursor: pointer;
133 padding: 0;
134 border: 0;
135 outline: none;
136 height: 100%;
137 background: transparent;
138 border-color: transparent; }
139 .next-tabs-btn-down, .next-tabs-btn-down:link, .next-tabs-btn-down:visited, .next-tabs-btn-down.visited, .next-tabs-btn-prev, .next-tabs-btn-prev:link, .next-tabs-btn-prev:visited, .next-tabs-btn-prev.visited, .next-tabs-btn-next, .next-tabs-btn-next:link, .next-tabs-btn-next:visited, .next-tabs-btn-next.visited {
140 color: #666666;
141 color: var(--tab-nav-arrow-color-normal, #666666); }
142 .next-tabs-btn-down:focus, .next-tabs-btn-down:hover, .next-tabs-btn-down.hover, .next-tabs-btn-prev:focus, .next-tabs-btn-prev:hover, .next-tabs-btn-prev.hover, .next-tabs-btn-next:focus, .next-tabs-btn-next:hover, .next-tabs-btn-next.hover {
143 color: #333333;
144 color: var(--tab-nav-arrow-color-hover, #333333);
145 background: transparent;
146 border-color: transparent;
147 text-decoration: none; }
148 .next-tabs-btn-down:active, .next-tabs-btn-down.active, .next-tabs-btn-prev:active, .next-tabs-btn-prev.active, .next-tabs-btn-next:active, .next-tabs-btn-next.active {
149 color: #333333;
150 color: var(--tab-nav-arrow-color-hover, #333333);
151 background: transparent;
152 border-color: transparent;
153 text-decoration: none; }
154 .next-tabs-btn-down.disabled, .next-tabs-btn-prev.disabled, .next-tabs-btn-next.disabled {
155 cursor: not-allowed;
156 color: #DCDEE3;
157 color: var(--tab-nav-arrow-color-disabled, #DCDEE3); }
158 .next-tabs-btn-next {
159 right: 8px;
160 right: var(--tab-nav-arrow-right-positon-right, 8px); }
161 .next-tabs-btn-prev {
162 right: 32px;
163 right: var(--tab-nav-arrow-left-positon-right, 32px); }
164 .next-tabs-btn-down {
165 right: 8px;
166 right: var(--tab-nav-arrow-down-positon-right, 8px); }
167 .next-tabs .next-tab-icon-dropdown::before {
168 content: "";
169 content: var(--tab-icon-dropdown-content, ""); }
170 .next-tabs .next-tab-icon-prev::before {
171 content: "";
172 content: var(--tab-icon-prev-content, ""); }
173 .next-tabs .next-tab-icon-next::before {
174 content: "";
175 content: var(--tab-icon-next-content, ""); }
176 .next-tabs-content {
177 overflow: hidden; }
178 .next-tabs-vertical > .next-tabs-bar .next-tabs-nav {
179 width: 100%; }
180 .next-tabs-vertical > .next-tabs-bar .next-tabs-tab {
181 display: block; }
182 .next-tabs.next-medium .next-tabs-nav-container-scrolling {
183 padding-right: 60px;
184 padding-right: var(--tab-nav-scroll-padding-right-m, 60px); }
185 .next-tabs.next-medium .next-tabs-tab-inner {
186 font-size: 12px;
187 font-size: var(--tab-item-text-size-m, 12px);
188 padding: 12px 16px;
189 padding: var(--tab-item-padding-tb-size-m, 12px) var(--tab-item-padding-lr-size-m, 16px); }
190 .next-tabs.next-medium .next-tabs-tab-inner .next-icon {
191 line-height: 1; }
192 .next-tabs.next-medium .next-tabs-tab-inner .next-icon:before,
193 .next-tabs.next-medium .next-tabs-tab-inner .next-icon .next-icon-remote {
194 width: 16px;
195 width: var(--tab-nav-tab-icon-size-m, 16px);
196 font-size: 16px;
197 font-size: var(--tab-nav-tab-icon-size-m, 16px);
198 line-height: inherit; }
199 .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close {
200 margin-left: 8px;
201 margin-left: var(--tab-nav-close-icon-padding-l-size-m, 8px); }
202 .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close:before,
203 .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close .next-icon-remote {
204 width: 12px;
205 width: var(--tab-nav-close-icon-size-m, 12px);
206 font-size: 12px;
207 font-size: var(--tab-nav-close-icon-size-m, 12px);
208 line-height: inherit; }
209 .next-tabs.next-medium .next-tabs-btn-down .next-icon:before,
210 .next-tabs.next-medium .next-tabs-btn-down .next-icon .next-icon-remote,
211 .next-tabs.next-medium .next-tabs-btn-prev .next-icon:before,
212 .next-tabs.next-medium .next-tabs-btn-prev .next-icon .next-icon-remote,
213 .next-tabs.next-medium .next-tabs-btn-next .next-icon:before,
214 .next-tabs.next-medium .next-tabs-btn-next .next-icon .next-icon-remote {
215 width: 16px;
216 width: var(--tab-nav-tab-icon-size-m, 16px);
217 font-size: 16px;
218 font-size: var(--tab-nav-tab-icon-size-m, 16px);
219 line-height: inherit; }
220 .next-tabs.next-small .next-tabs-nav-container-scrolling {
221 padding-right: 56px;
222 padding-right: var(--tab-nav-scroll-padding-right-s, 56px); }
223 .next-tabs.next-small .next-tabs-tab-inner {
224 font-size: 12px;
225 font-size: var(--tab-item-text-size-s, 12px);
226 padding: 8px 12px;
227 padding: var(--tab-item-padding-tb-size-s, 8px) var(--tab-item-padding-lr-size-s, 12px); }
228 .next-tabs.next-small .next-tabs-tab-inner .next-icon {
229 line-height: 1; }
230 .next-tabs.next-small .next-tabs-tab-inner .next-icon:before,
231 .next-tabs.next-small .next-tabs-tab-inner .next-icon .next-icon-remote {
232 width: 12px;
233 width: var(--tab-nav-tab-icon-size-s, 12px);
234 font-size: 12px;
235 font-size: var(--tab-nav-tab-icon-size-s, 12px);
236 line-height: inherit; }
237 .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close {
238 margin-left: 8px;
239 margin-left: var(--tab-nav-close-icon-padding-l-size-s, 8px); }
240 .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before,
241 .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close .next-icon-remote {
242 width: 8px;
243 width: var(--tab-nav-close-icon-size-s, 8px);
244 font-size: 8px;
245 font-size: var(--tab-nav-close-icon-size-s, 8px);
246 line-height: inherit; }
247 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
248 .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close {
249 transform: scale(0.5);
250 margin-left: -4px;
251 margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--tab-nav-close-icon-size-s, 8px)/2);
252 margin-right: -4px;
253 margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--tab-nav-close-icon-size-s, 8px)/2); }
254 .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before {
255 width: 16px;
256 width: var(--icon-s, 16px);
257 font-size: 16px;
258 font-size: var(--icon-s, 16px); } }
259 .next-tabs.next-small .next-tabs-btn-down .next-icon:before,
260 .next-tabs.next-small .next-tabs-btn-down .next-icon .next-icon-remote,
261 .next-tabs.next-small .next-tabs-btn-prev .next-icon:before,
262 .next-tabs.next-small .next-tabs-btn-prev .next-icon .next-icon-remote,
263 .next-tabs.next-small .next-tabs-btn-next .next-icon:before,
264 .next-tabs.next-small .next-tabs-btn-next .next-icon .next-icon-remote {
265 width: 12px;
266 width: var(--tab-nav-tab-icon-size-s, 12px);
267 font-size: 12px;
268 font-size: var(--tab-nav-tab-icon-size-s, 12px);
269 line-height: inherit; }
270 .next-tabs-pure > .next-tabs-bar {
271 border-bottom: solid 1px #DCDEE3;
272 border-bottom: var(--tab-pure-divider-line, solid 1px #DCDEE3);
273 background-color: transparent;
274 background-color: var(--tab-pure-bg-color, transparent); }
275 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container {
276 margin-bottom: -1px;
277 margin-bottom: calc(0px - var(--tab-pure-divider-line-width, 1px));
278 box-shadow: none;
279 box-shadow: var(--tab-pure-divider-shadow, none); }
280 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab {
281 color: #666666;
282 color: var(--tab-pure-text-color-normal, #666666);
283 background-color: transparent; }
284 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:hover {
285 cursor: pointer;
286 color: #333333;
287 color: var(--tab-pure-text-color-hover, #333333);
288 background-color: transparent; }
289 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active {
290 z-index: 1;
291 color: #5584FF;
292 color: var(--tab-pure-text-color-selected, #5584FF);
293 background-color: transparent; }
294 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.disabled {
295 pointer-events: none;
296 cursor: default;
297 color: #DCDEE3;
298 color: var(--tab-pure-text-color-disabled, #DCDEE3);
299 background: transparent; }
300 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:before {
301 border-radius: 0%;
302 width: 0;
303 border-bottom: 2px solid #5584FF;
304 border-bottom: var(--tab-pure-ink-bar-width, 2px) solid var(--tab-pure-ink-bar-color, #5584FF);
305 left: 50%;
306 bottom: 0%; }
307 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active:before {
308 width: 100%;
309 width: calc(100% - var(--tab-pure-ink-bar-padding-l, 0px)*2);
310 left: 0px;
311 left: calc(var(--tab-pure-ink-bar-padding-l, 0px)); }
312 .next-tabs-wrapped > .next-tabs-bar {
313 background: transparent;
314 background: var(--tab-wrapped-bar-bg-color, transparent); }
315 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab {
316 color: #666666;
317 color: var(--tab-wrapped-text-color, #666666);
318 background-color: #F2F3F7;
319 background-color: var(--tab-wrapped-bg-color, #F2F3F7); }
320 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab:hover {
321 cursor: pointer;
322 color: #333333;
323 color: var(--tab-wrapped-text-color-hover, #333333);
324 background-color: #EBECF0;
325 background-color: var(--tab-wrapped-bg-color-hover, #EBECF0); }
326 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active {
327 z-index: 1;
328 color: #5584FF;
329 color: var(--tab-wrapped-text-color-selected, #5584FF);
330 background-color: #FFFFFF;
331 background-color: var(--tab-wrapped-bg-color-selected, #FFFFFF); }
332 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled {
333 pointer-events: none;
334 cursor: default;
335 color: #CCCCCC;
336 color: var(--tab-wrapped-text-color-disabled, #CCCCCC);
337 background: #F7F8FA;
338 background: var(--tab-wrapped-bg-color-disabled, #F7F8FA); }
339 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close {
340 color: #666666;
341 color: var(--tab-close-icon-color, #666666); }
342 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close:hover {
343 color: #333333;
344 color: var(--tab-close-icon-color-hover, #333333); }
345 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close:focus {
346 outline: none; }
347 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active .next-tabs-tab-close {
348 color: #5584FF;
349 color: var(--tab-close-icon-color-selected, #5584FF); }
350 .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled .next-tabs-tab-close {
351 color: #DCDEE3;
352 color: var(--tab-close-icon-color-disabled, #DCDEE3); }
353 .next-tabs-wrapped:before, .next-tabs-wrapped:after {
354 content: "";
355 display: table; }
356 .next-tabs-wrapped:after {
357 clear: both; }
358 .next-tabs-wrapped > .next-tabs-content {
359 position: relative; }
360 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar {
361 position: relative; }
362 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra {
363 position: absolute;
364 top: 50%;
365 right: 0;
366 transform: translateY(-50%); }
367 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab {
368 margin-right: 4px;
369 margin-right: var(--tab-wrapped-tab-margin-right, 4px);
370 border: solid 1px #DCDEE3;
371 border: var(--tab-wrapped-bar-border, solid 1px #DCDEE3);
372 border-radius: 3px 3px 0 0;
373 border-radius: var(--tab-wrapped-tab-top-border-radius, 3px 3px 0 0);
374 border-width: 1px 1px 1px 1px;
375 border-width: var(--tab-wrapped-border-side-width, 1px) var(--tab-wrapped-border-side-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-side-width, 1px); }
376 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:hover {
377 border-color: #C4C6CF;
378 border-color: var(--tab-wrapped-border-line-color-hover, #C4C6CF); }
379 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active {
380 border-color: #DCDEE3 #DCDEE3 #FFFFFF #DCDEE3;
381 border-color: var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-bg-color-selected, #FFFFFF) var(--tab-wrapped-border-line-color, #DCDEE3); }
382 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:before {
383 border-radius: 3px;
384 border-radius: var(--tab-wrapped-tab-corner-radius, 3px);
385 width: 0;
386 border-top: 2px solid #5584FF;
387 border-top: var(--tab-wrapped-ink-bar-width, 2px) solid var(--tab-wrapped-ink-bar-color, #5584FF);
388 left: 50%;
389 top: -1px;
390 top: calc(0px - var(--tab-wrapped-border-line-width, 1px)); }
391 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active:before {
392 width: calc(100% - 6px);
393 width: calc(100% - var(--tab-wrapped-tab-corner-radius, 3px)*2 - var(--tab-wrapped-ink-bar-padding-l, 0px)*2);
394 left: 3px;
395 left: calc(var(--tab-wrapped-tab-corner-radius, 3px) + var(--tab-wrapped-ink-bar-padding-l, 0px)); }
396 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active {
397 border-width: 1px 1px 1px 1px;
398 border-width: var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px); }
399 .next-tabs-wrapped.next-tabs-top > .next-tabs-bar:before {
400 content: '';
401 position: absolute;
402 top: 100%;
403 width: 100%;
404 height: 0;
405 border-bottom: 1px solid #DCDEE3;
406 border-bottom: var(--tab-wrapped-content-border, 1px solid #DCDEE3);
407 transform: translateY(-1px);
408 transform: translateY(calc(0px - var(--tab-wrapped-content-border-line-width, 1px)));
409 display: block; }
410 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar {
411 position: relative; }
412 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra {
413 position: absolute;
414 top: 50%;
415 right: 0;
416 transform: translateY(-50%); }
417 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab {
418 margin-right: 4px;
419 margin-right: var(--tab-wrapped-tab-margin-right, 4px);
420 border: solid 1px #DCDEE3;
421 border: var(--tab-wrapped-bar-border, solid 1px #DCDEE3);
422 border-radius: 0 0 3px 3px;
423 border-radius: var(--tab-wrapped-tab-bottom-border-radius, 0 0 3px 3px); }
424 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:hover {
425 border-color: #C4C6CF;
426 border-color: var(--tab-wrapped-border-line-color-hover, #C4C6CF); }
427 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active {
428 border-color: #FFFFFF #DCDEE3 #DCDEE3 #DCDEE3;
429 border-color: var(--tab-wrapped-bg-color-selected, #FFFFFF) var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-border-line-color, #DCDEE3); }
430 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:before {
431 border-radius: 3px;
432 border-radius: var(--tab-wrapped-tab-corner-radius, 3px);
433 width: 0;
434 border-bottom: 2px solid #5584FF;
435 border-bottom: var(--tab-wrapped-ink-bar-width, 2px) solid var(--tab-wrapped-ink-bar-color, #5584FF);
436 left: 50%;
437 bottom: -1px;
438 bottom: calc(0px - var(--tab-wrapped-border-line-width, 1px)); }
439 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active:before {
440 width: calc(100% - 6px);
441 width: calc(100% - var(--tab-wrapped-tab-corner-radius, 3px)*2 - var(--tab-wrapped-ink-bar-padding-l, 0px)*2);
442 left: 3px;
443 left: calc(var(--tab-wrapped-tab-corner-radius, 3px) + var(--tab-wrapped-ink-bar-padding-l, 0px)); }
444 .next-tabs-wrapped.next-tabs-bottom > .next-tabs-content {
445 top: 1px;
446 top: var(--tab-wrapped-content-position-top, 1px);
447 border-bottom: 1px solid #DCDEE3;
448 border-bottom: var(--tab-wrapped-content-border, 1px solid #DCDEE3); }
449 .next-tabs-wrapped.next-tabs-left > .next-tabs-bar {
450 float: left; }
451 .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab {
452 float: none;
453 margin-bottom: 4px;
454 margin-bottom: var(--tab-wrapped-tab-margin-bottom, 4px);
455 border: solid 1px #DCDEE3;
456 border: var(--tab-wrapped-bar-border, solid 1px #DCDEE3);
457 border-radius: 3px 0 0 3px;
458 border-radius: var(--tab-wrapped-tab-left-border-radius, 3px 0 0 3px);
459 border-width: 1px 1px 1px 1px;
460 border-width: var(--tab-wrapped-border-side-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-side-width, 1px) var(--tab-wrapped-border-side-width, 1px); }
461 .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:hover {
462 border-color: #C4C6CF;
463 border-color: var(--tab-wrapped-border-line-color-hover, #C4C6CF); }
464 .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active {
465 border-color: #DCDEE3 #FFFFFF #DCDEE3 #DCDEE3;
466 border-color: var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-bg-color-selected, #FFFFFF) var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-border-line-color, #DCDEE3); }
467 .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:before {
468 border-radius: 3px;
469 border-radius: var(--tab-wrapped-tab-corner-radius, 3px);
470 height: 0;
471 border-left: 2px solid #5584FF;
472 border-left: var(--tab-wrapped-ink-bar-width, 2px) solid var(--tab-wrapped-ink-bar-color, #5584FF);
473 top: 50%;
474 left: -1px;
475 left: calc(0px - var(--tab-wrapped-border-line-width, 1px)); }
476 .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active:before {
477 height: calc(100% - 6px);
478 height: calc(100% - var(--tab-wrapped-tab-corner-radius, 3px)*2);
479 top: 3px;
480 top: var(--tab-wrapped-tab-corner-radius, 3px); }
481 .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active {
482 border-width: 1px 1px 1px 1px;
483 border-width: var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px); }
484 .next-tabs-wrapped.next-tabs-left > .next-tabs-content {
485 right: 1px;
486 right: var(--tab-wrapped-content-position-right, 1px);
487 border-left: 1px solid #DCDEE3;
488 border-left: var(--tab-wrapped-content-border, 1px solid #DCDEE3); }
489 .next-tabs-wrapped.next-tabs-right > .next-tabs-bar {
490 float: right; }
491 .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab {
492 float: none;
493 margin-bottom: 4px;
494 margin-bottom: var(--tab-wrapped-tab-margin-bottom, 4px);
495 border: solid 1px #DCDEE3;
496 border: var(--tab-wrapped-bar-border, solid 1px #DCDEE3);
497 border-radius: 0 3px 3px 0;
498 border-radius: var(--tab-wrapped-tab-right-border-radius, 0 3px 3px 0);
499 border-width: 1px 1px 1px 1px;
500 border-width: var(--tab-wrapped-border-side-width, 1px) var(--tab-wrapped-border-side-width, 1px) var(--tab-wrapped-border-side-width, 1px) var(--tab-wrapped-border-line-width, 1px); }
501 .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:hover {
502 border-color: #C4C6CF;
503 border-color: var(--tab-wrapped-border-line-color-hover, #C4C6CF); }
504 .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active {
505 border-color: #DCDEE3 #DCDEE3 #DCDEE3 #FFFFFF;
506 border-color: var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-border-line-color, #DCDEE3) var(--tab-wrapped-bg-color-selected, #FFFFFF); }
507 .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:before {
508 border-radius: 3px;
509 border-radius: var(--tab-wrapped-tab-corner-radius, 3px);
510 height: 0;
511 border-right: 2px solid #5584FF;
512 border-right: var(--tab-wrapped-ink-bar-width, 2px) solid var(--tab-wrapped-ink-bar-color, #5584FF);
513 top: 50%;
514 right: -1px;
515 right: calc(0px - var(--tab-wrapped-border-line-width, 1px)); }
516 .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active:before {
517 height: calc(100% - 6px);
518 height: calc(100% - var(--tab-wrapped-tab-corner-radius, 3px)*2);
519 top: 3px;
520 top: var(--tab-wrapped-tab-corner-radius, 3px); }
521 .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active {
522 border-width: 1px 1px 1px 1px;
523 border-width: var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px) var(--tab-wrapped-border-line-width, 1px); }
524 .next-tabs-wrapped.next-tabs-right > .next-tabs-content {
525 right: -1px;
526 right: calc(0px - var(--tab-wrapped-content-position-right, 1px));
527 border-right: 1px solid #DCDEE3;
528 border-right: var(--tab-wrapped-content-border, 1px solid #DCDEE3); }
529 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab {
530 transition: background-color 100ms linear;
531 transition: background-color var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
532 border: 1px solid #C4C6CF;
533 border: var(--tab-capsule-tab-border, 1px solid #C4C6CF);
534 border-right-color: transparent;
535 margin-right: -1px;
536 margin-right: calc(0px - var(--tab-capsule-tab-border-line-width, 1px));
537 color: #333333;
538 color: var(--tab-capsule-text-color, #333333);
539 background-color: #F2F3F7;
540 background-color: var(--tab-capsule-bg-color, #F2F3F7); }
541 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child {
542 border-radius: 3px 0 0 3px;
543 border-radius: var(--tab-capsule-corner-radius, 3px) 0 0 var(--tab-capsule-corner-radius, 3px); }
544 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child {
545 border-radius: 0 3px 3px 0;
546 border-radius: 0 var(--tab-capsule-corner-radius, 3px) var(--tab-capsule-corner-radius, 3px) 0;
547 border-right: 1px solid #C4C6CF;
548 border-right: var(--tab-capsule-tab-border, 1px solid #C4C6CF); }
549 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active {
550 border-right: 1px solid #C4C6CF;
551 border-right: var(--tab-capsule-tab-border, 1px solid #C4C6CF);
552 border-color: #5584FF;
553 border-color: var(--tab-capsule-tab-border-line-color-active, #5584FF); }
554 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled {
555 border-color: #E6E7EB;
556 border-color: var(--tab-capsule-tab-border-line-color-disabled, #E6E7EB); }
557 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:hover {
558 z-index: 2;
559 border-right: 1px solid #C4C6CF;
560 border-right: var(--tab-capsule-tab-border, 1px solid #C4C6CF);
561 border-color: #C4C6CF;
562 border-color: var(--tab-capsule-tab-border-line-color-hover, #C4C6CF); }
563 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:hover {
564 cursor: pointer;
565 color: #333333;
566 color: var(--tab-capsule-text-color-hover, #333333);
567 background-color: #EBECF0;
568 background-color: var(--tab-capsule-bg-color-hover, #EBECF0); }
569 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active {
570 z-index: 1;
571 color: #FFFFFF;
572 color: var(--tab-capsule-text-color-selected, #FFFFFF);
573 background-color: #5584FF;
574 background-color: var(--tab-capsule-bg-color-selected, #5584FF); }
575 .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled {
576 pointer-events: none;
577 cursor: default;
578 color: #CCCCCC;
579 color: var(--tab-capsule-text-color-disabled, #CCCCCC);
580 background: #F7F8FA;
581 background: var(--tab-capsule-bg-color-disabled, #F7F8FA); }
582 .next-tabs-text > .next-tabs-bar .next-tabs-tab {
583 color: #666666;
584 color: var(--tab-text-text-color-normal, #666666);
585 background-color: transparent; }
586 .next-tabs-text > .next-tabs-bar .next-tabs-tab:hover {
587 cursor: pointer;
588 color: #333333;
589 color: var(--tab-text-text-color-hover, #333333);
590 background-color: transparent; }
591 .next-tabs-text > .next-tabs-bar .next-tabs-tab.active {
592 z-index: 1;
593 color: #5584FF;
594 color: var(--tab-text-text-color-selected, #5584FF);
595 background-color: transparent; }
596 .next-tabs-text > .next-tabs-bar .next-tabs-tab.disabled {
597 pointer-events: none;
598 cursor: default;
599 color: #CCCCCC;
600 color: var(--tab-text-text-color-disabled, #CCCCCC);
601 background: transparent; }
602 .next-tabs-text > .next-tabs-bar .next-tabs-tab:not(:last-child):after {
603 content: '';
604 position: absolute;
605 right: 0;
606 top: calc(50% - 4px);
607 top: calc(50% - var(--tab-text-item-sep-height, 8px)/2);
608 width: 1px;
609 width: var(--tab-text-item-sep-width, 1px);
610 height: 8px;
611 height: var(--tab-text-item-sep-height, 8px);
612 background-color: #DCDEE3;
613 background-color: var(--tab-text-item-sep-color, #DCDEE3); }
614 .next-tabs-pure > .next-tabs-bar {
615 position: relative; }
616 .next-tabs-pure > .next-tabs-bar .next-tabs-nav-extra {
617 position: absolute;
618 top: 50%;
619 right: 0;
620 transform: translateY(-50%); }
621 .next-tabs-capsule > .next-tabs-bar {
622 position: relative; }
623 .next-tabs-capsule > .next-tabs-bar .next-tabs-nav-extra {
624 position: absolute;
625 top: 50%;
626 right: 0;
627 transform: translateY(-50%); }
628 .next-tabs-text > .next-tabs-bar {
629 position: relative; }
630 .next-tabs-text > .next-tabs-bar .next-tabs-nav-extra {
631 position: absolute;
632 top: 50%;
633 right: 0;
634 transform: translateY(-50%); }
635
636.next-tabs[dir='rtl'].next-medium .next-tabs-nav-container-scrolling {
637 padding-left: 60px;
638 padding-left: var(--tab-nav-scroll-padding-right-m, 60px);
639 padding-right: 0; }
640
641.next-tabs[dir='rtl'].next-medium .next-tabs-tab-close {
642 padding-right: 8px;
643 padding-right: var(--tab-nav-close-icon-padding-l-size-m, 8px);
644 padding-left: 0; }
645
646.next-tabs[dir='rtl'].next-small .next-tabs-nav-container-scrolling {
647 padding-left: 56px;
648 padding-left: var(--tab-nav-scroll-padding-right-s, 56px);
649 padding-right: 0; }
650
651.next-tabs[dir='rtl'].next-small .next-tabs-tab-close {
652 padding-right: 8px;
653 padding-right: var(--tab-nav-close-icon-padding-l-size-s, 8px);
654 padding-left: 0; }
655
656.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra {
657 right: auto;
658 left: 0; }
659
660.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra {
661 right: auto;
662 left: 0; }
663
664.next-tabs[dir='rtl'] > .next-tabs-bar .next-tabs-nav-extra {
665 right: auto;
666 left: 0; }
667
668.next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab {
669 border-top: 1px solid #C4C6CF;
670 border-top: var(--tab-capsule-tab-border, 1px solid #C4C6CF);
671 border-bottom: 1px solid #C4C6CF;
672 border-bottom: var(--tab-capsule-tab-border, 1px solid #C4C6CF);
673 border-right: 1px solid #C4C6CF;
674 border-right: var(--tab-capsule-tab-border, 1px solid #C4C6CF);
675 border-left: 0; }
676 .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child {
677 border-left: 0;
678 border-radius: 0 3px 3px 0;
679 border-radius: 0 var(--tab-capsule-corner-radius, 3px) var(--tab-capsule-corner-radius, 3px) 0; }
680 .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child {
681 border-radius: 3px 0 0 3px;
682 border-radius: var(--tab-capsule-corner-radius, 3px) 0 0 var(--tab-capsule-corner-radius, 3px);
683 border-left: 1px solid #C4C6CF;
684 border-left: var(--tab-capsule-tab-border, 1px solid #C4C6CF); }
685 .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active {
686 margin-left: -1px;
687 margin-left: calc(0px - var(--tab-capsule-tab-border-line-width, 1px));
688 margin-right: auto;
689 border-left: 1px solid #C4C6CF;
690 border-left: var(--tab-capsule-tab-border, 1px solid #C4C6CF);
691 border-color: #5584FF;
692 border-color: var(--tab-capsule-tab-border-line-color-active, #5584FF); }
693
694.next-tabs[dir='rtl'] .next-tabs-btn-next {
695 left: 8px;
696 left: var(--tab-nav-arrow-right-positon-right, 8px);
697 right: auto; }
698
699.next-tabs[dir='rtl'] .next-tabs-btn-prev {
700 left: 32px;
701 left: var(--tab-nav-arrow-left-positon-right, 32px);
702 right: auto; }
703
704.next-tabs[dir='rtl'] .next-tabs-btn-down {
705 left: 8px;
706 left: var(--tab-nav-arrow-down-positon-right, 8px);
707 right: auto; }
708
709.next-tabs-text[dir='rtl'] > .next-tabs-bar .next-tabs-tab:not(:last-child):after {
710 content: '';
711 position: absolute;
712 left: 0;
713 right: auto; }