1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.tabs {
  margin-top: var(--padding);
  margin-bottom: var(--padding);
  display: flex;
  flex-wrap: wrap;
  background-color: var(--color-background-muted);
  border: var(--border);
  padding: 0;
}

.tabs.padded {
  margin-left: var(--padding);
  margin-right: var(--padding);
}

.tabs .input {
  position: absolute;
  opacity: 0;
}

.tabs .label {
  width: auto;
  cursor: pointer;
  padding: 8px;
}

.tabs .input:checked + .label {
  background-color: var(--color-background);
}

.tabs .panel {
  padding: var(--padding);
  background-color: var(--color-background);
  width: 100%;
  display: none;
  order: 99;
}

.tabs .input:checked + .label + .panel {
  display: block;
}