docs/styles/Navigator.module.css

.navigationControl {
    display: grid;
    align-items: center;
    box-shadow: 0 0 1px 1px rgba(var(--shadow-color));
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    --shadow-color: 255, 255, 255, 0.2;
}

.navigationControl:hover {
    --shadow-color: 66, 135, 245, 0.8;
}

.navigationControl:hover .text span,
.navigationControl:hover svg {
    color: #2d90fa;
}

.iconWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.navigationControlBack {
    grid-template-columns: 30px auto;
    justify-items: end;
    text-align: right;
}

.navigationControlNext {
    grid-template-columns: auto 30px;
}

.text > * {
    display: block;
}

.text small {
    color: #bbb;
}

.root {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 20px 0;
    width: 100%;
}

@media (min-width: 971px) {
    .root:not([data-wrap="true"]) {
        grid-template-columns: 1fr 1fr;
    }
}
1	.navigationControl {
2	display: grid;
3	align-items: center;
4	box-shadow: 0 0 1px 1px rgba(var(--shadow-color));
5	border-radius: 5px;
6	padding: 10px;
7	cursor: pointer;
8	--shadow-color: 255, 255, 255, 0.2;
9	}
10
11	.navigationControl:hover {
12	--shadow-color: 66, 135, 245, 0.8;
13	}
14
15	.navigationControl:hover .text span,
16	.navigationControl:hover svg {
17	color: #2d90fa;
18	}
19
20	.iconWrapper {
21	display: flex;
22	justify-content: center;
23	align-items: center;
24	text-align: center;
25	}
26
27	.navigationControlBack {
28	grid-template-columns: 30px auto;
29	justify-items: end;
30	text-align: right;
31	}
32
33	.navigationControlNext {
34	grid-template-columns: auto 30px;
35	}
36
37	.text > * {
38	display: block;
39	}
40
41	.text small {
42	color: #bbb;
43	}
44
45	.root {
46	display: grid;
47	grid-template-columns: 1fr;
48	gap: 10px;
49	margin: 20px 0;
50	width: 100%;
51	}
52
53	@media (min-width: 971px) {
54	.root:not([data-wrap="true"]) {
55	grid-template-columns: 1fr 1fr;
56	}
57	}