1 | import {
|
2 | component_styles_default
|
3 | } from "./chunk.7IGWJVQF.js";
|
4 | import {
|
5 | r
|
6 | } from "./chunk.WWAD5WF4.js";
|
7 |
|
8 |
|
9 | var tab_styles_default = r`
|
10 | ${component_styles_default}
|
11 |
|
12 | :host {
|
13 | display: inline-block;
|
14 | }
|
15 |
|
16 | .tab {
|
17 | display: inline-flex;
|
18 | align-items: center;
|
19 | font-family: var(--sl-font-sans);
|
20 | font-size: var(--sl-font-size-small);
|
21 | font-weight: var(--sl-font-weight-semibold);
|
22 | border-radius: var(--sl-border-radius-medium);
|
23 | color: var(--sl-color-neutral-600);
|
24 | padding: var(--sl-spacing-medium) var(--sl-spacing-large);
|
25 | white-space: nowrap;
|
26 | user-select: none;
|
27 | cursor: pointer;
|
28 | transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
|
29 | }
|
30 |
|
31 | .tab:hover:not(.tab--disabled) {
|
32 | color: var(--sl-color-primary-600);
|
33 | }
|
34 |
|
35 | .tab:focus {
|
36 | outline: none;
|
37 | }
|
38 |
|
39 | .tab:focus-visible:not(.tab--disabled) {
|
40 | color: var(--sl-color-primary-600);
|
41 | outline: var(--sl-focus-ring);
|
42 | outline-offset: calc(-1 * var(--sl-focus-ring-width) - var(--sl-focus-ring-offset));
|
43 | }
|
44 |
|
45 | .tab.tab--active:not(.tab--disabled) {
|
46 | color: var(--sl-color-primary-600);
|
47 | }
|
48 |
|
49 | .tab.tab--closable {
|
50 | padding-inline-end: var(--sl-spacing-small);
|
51 | }
|
52 |
|
53 | .tab.tab--disabled {
|
54 | opacity: 0.5;
|
55 | cursor: not-allowed;
|
56 | }
|
57 |
|
58 | .tab__close-button {
|
59 | font-size: var(--sl-font-size-large);
|
60 | margin-inline-start: var(--sl-spacing-2x-small);
|
61 | }
|
62 |
|
63 | .tab__close-button::part(base) {
|
64 | padding: var(--sl-spacing-3x-small);
|
65 | }
|
66 | `;
|
67 |
|
68 | export {
|
69 | tab_styles_default
|
70 | };
|