1[data-media-video-controls] {
2 display: flex;
3 width: 100%;
4 flex: none;
5 flex-direction: column;
6 gap: 0.125rem;
7 padding: 0.25rem 0.375rem;
8 border: 1px solid var(--border);
9 border-top: 0;
10 border-radius: 0 0 var(--radius-lg) var(--radius-lg);
11 background: var(--muted);
12 color: var(--foreground);
13}
14
15[data-media-player] > video {
16 min-height: 0;
17 border-bottom-right-radius: 0;
18 border-bottom-left-radius: 0;
19}
20
21[data-media-video-seek],
22[data-media-video-volume] {
23 min-width: 0;
24 height: 1.5rem;
25 cursor: pointer;
26 accent-color: var(--primary);
27}
28
29[data-media-video-seek] {
30 width: 100%;
31}
32
33[data-media-video-volume],
34[data-media-video-speed] {
35 display: block;
36}
37
38[data-media-video-volume] {
39 width: 100%;
40 min-width: 3rem;
41}
42
43[data-media-video-speed] {
44 max-width: 4rem;
45 height: 1.75rem;
46 border: 0;
47 border-radius: var(--radius-sm);
48 background: var(--muted);
49 color: inherit;
50 font: inherit;
51 font-size: 0.75rem;
52}
53
54[data-media-video-seek]:focus-visible,
55[data-media-video-volume]:focus-visible,
56[data-media-video-speed]:focus-visible {
57 outline: 2px solid var(--ring);
58 outline-offset: 2px;
59}
60
61[data-media-player]:fullscreen {
62 display: flex;
63 width: 100%;
64 max-width: none;
65 height: 100%;
66 max-height: none;
67 justify-content: center;
68 background: black;
69}
70
71[data-media-player]:fullscreen > video {
72 flex: 1;
73 width: 100%;
74 min-height: 0;
75 max-height: calc(100% - 4rem);
76}