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
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

.menu-container {
  position: absolute;
  top: var(--nav-height);
  left: 0;
  width: var(--menu-width);
  min-width: var(--menu-width);
  height: calc(100% - var(--nav-height));
  overflow: auto;
  color: var(--color-menu-foreground);
  background-color: var(--color-menu-background);
  transition: transform 250ms ease-in-out;
}

@media (prefers-reduced-motion) {
  .menu-container {
    transition: none;
  }
}

@media (max-width: 800px) {
  .menu-container {
    transform: translateX(calc(-1 * var(--menu-width)));
    min-width: 0;
  }
}

.menu-container .menu {
  padding: var(--padding) 0 calc(var(--padding) * 2) 0;
}

.menu-container ul {
  margin: 0;
  list-style: none;
  padding: 0;
  overflow: hidden;
}

.menu-container .item, .menu-container label {
  display: block;
  padding: 4px 0;
  user-select: none;
}

.menu-container .item {
  height: 28px;
  white-space: nowrap;
  overflow: hidden;
}

.menu-container .final {
  color: var(--color-menu-selected-foreground);
  background-color: var(--color-menu-selected-background);
}

.menu-container .separator {
  margin: var(--padding-small) 0;
  border-bottom: 1px solid var(--color-menu-selected-background);
}

.menu-container .label-link {
  float: right;
  margin-right: var(--padding);
  margin-top: 2px;
}

.menu-container .item svg {
  margin-left: 19px;
}

.menu-container a {
  color: var(--color-menu-foreground);
}

.menu-container label {
  cursor: pointer;
}

.menu-container .badge {
  float: right;
  margin-right: var(--padding-small);
  font-size: 75%;
  padding-top: 2px;
  color: var(--color-foreground-muted);
}

.level-0 .item, .level-0 label {
  padding-left: var(--menu-padding);
}

.level-1 .item, .level-1 label {
  padding-left: calc(var(--menu-padding) * 2);
}

.level-2 .item, .level-2 label {
  padding-left: calc(var(--menu-padding) * 3);
}

.level-3 .item, .level-3 label {
  padding-left: calc(var(--menu-padding) * 4);
}

.level-4 .label-item, .level-4 label {
  padding-left: calc(var(--menu-padding) * 5);
}

.level-5 .label-item, .level-5 label {
  padding-left: calc(var(--menu-padding) * 6);
}

.level-6 .label-item, .level-6 label {
  padding-left: calc(var(--menu-padding) * 7);
}

.level-7 .label-item, .level-7 label {
  padding-left: calc(var(--menu-padding) * 8);
}

.level-8 .label-item, .level-8 label {
  padding-left: calc(var(--menu-padding) * 8);
}

.menu-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms;
}

@media (prefers-reduced-motion) {
  .menu-content {
    transition: none;
  }
}

.menu-container input[type=checkbox]:checked + label + .menu-content {
  grid-template-rows: 1fr;
}

.menu-container input[type=checkbox]:checked + label .expand-collapse {
  transform: rotate(90deg);
}