https://cdn.duemint.com/shoelace/chunks/chunk.PNOB3JXQ.js

1import {
2  component_styles_default
3} from "./chunk.BCEYT3RT.js";
4import {
5  i
6} from "./chunk.DUT32TWM.js";
7
8// src/components/carousel/carousel.styles.ts
9var carousel_styles_default = i`
10  ${component_styles_default}
11
12  :host {
13    --slide-gap: var(--sl-spacing-medium, 1rem);
14    --aspect-ratio: 16 / 9;
15    --scroll-hint: 0px;
16
17    display: flex;
18  }
19
20  .carousel {
21    display: grid;
22    grid-template-columns: min-content 1fr min-content;
23    grid-template-rows: 1fr min-content;
24    grid-template-areas:
25      '. slides .'
26      '. pagination .';
27    gap: var(--sl-spacing-medium);
28    align-items: center;
29    min-height: 100%;
30    min-width: 100%;
31    position: relative;
32  }
33
34  .carousel__pagination {
35    grid-area: pagination;
36    display: flex;
37    flex-wrap: wrap;
38    justify-content: center;
39    gap: var(--sl-spacing-small);
40  }
41
42  .carousel__slides {
43    grid-area: slides;
44
45    display: grid;
46    height: 100%;
47    width: 100%;
48    align-items: center;
49    justify-items: center;
50    overflow: auto;
51    overscroll-behavior-x: contain;
52    scrollbar-width: none;
53    aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
54    border-radius: var(--sl-border-radius-small);
55
56    --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
57  }
58
59  @media (prefers-reduced-motion) {
60    :where(.carousel__slides) {
61      scroll-behavior: auto;
62    }
63  }
64
65  .carousel__slides--horizontal {
66    grid-auto-flow: column;
67    grid-auto-columns: var(--slide-size);
68    grid-auto-rows: 100%;
69    column-gap: var(--slide-gap);
70    scroll-snap-type: x mandatory;
71    scroll-padding-inline: var(--scroll-hint);
72    padding-inline: var(--scroll-hint);
73    overflow-y: hidden;
74  }
75
76  .carousel__slides--vertical {
77    grid-auto-flow: row;
78    grid-auto-columns: 100%;
79    grid-auto-rows: var(--slide-size);
80    row-gap: var(--slide-gap);
81    scroll-snap-type: y mandatory;
82    scroll-padding-block: var(--scroll-hint);
83    padding-block: var(--scroll-hint);
84    overflow-x: hidden;
85  }
86
87  .carousel__slides--dragging,
88  .carousel__slides--dropping {
89    scroll-snap-type: unset;

89
90  }
91
92  :host([vertical]) ::slotted(sl-carousel-item) {
93    height: 100%;
94  }
95
96  .carousel__slides::-webkit-scrollbar {
97    display: none;
98  }
99
100  .carousel__navigation {
101    grid-area: navigation;
102    display: contents;
103    font-size: var(--sl-font-size-x-large);
104  }
105
106  .carousel__navigation-button {
107    flex: 0 0 auto;
108    display: flex;
109    align-items: center;
110    background: none;
111    border: none;
112    border-radius: var(--sl-border-radius-small);
113    font-size: inherit;
114    color: var(--sl-color-neutral-600);
115    padding: var(--sl-spacing-x-small);
116    cursor: pointer;
117    transition: var(--sl-transition-medium) color;
118    appearance: none;
119  }
120
121  .carousel__navigation-button--disabled {
122    opacity: 0.5;
123    cursor: not-allowed;
124  }
125
126  .carousel__navigation-button--disabled::part(base) {
127    pointer-events: none;
128  }
129
130  .carousel__navigation-button--previous {
131    grid-column: 1;
132    grid-row: 1;
133  }
134
135  .carousel__navigation-button--next {
136    grid-column: 3;
137    grid-row: 1;
138  }
139
140  .carousel__pagination-item {
141    display: block;
142    cursor: pointer;
143    background: none;
144    border: 0;
145    border-radius: var(--sl-border-radius-circle);
146    width: var(--sl-spacing-small);
147    height: var(--sl-spacing-small);
148    background-color: var(--sl-color-neutral-300);
149    padding: 0;
150    margin: 0;
151  }
152
153  .carousel__pagination-item--active {
154    background-color: var(--sl-color-neutral-700);
155    transform: scale(1.2);
156  }
157
158  /* Focus styles */
159  .carousel__slides:focus-visible,
160  .carousel__navigation-button:focus-visible,
161  .carousel__pagination-item:focus-visible {
162    outline: var(--sl-focus-ring);
163    outline-offset: var(--sl-focus-ring-offset);
164  }
165`;
166
167export {
168  carousel_styles_default
169};