.pick {
  display: flex;
  align-items: center;
  gap: calc(var(--base-size) * 2);
  padding: calc(var(--base-size) * 1) 0;
  font-size: calc(var(--base-size) * 3.5);
  line-height: calc(var(--base-size) * 3.5);
  cursor: pointer;
}
.bike-tree .pick { padding: calc(var(--base-size) * 2) calc(var(--base-size) * 3); }
.bike-tree .pick:hover { background: var(--color-secondary-background); }
.bike-tree .pick.on    { background: var(--color-tertiary-background); }
.bike-tree .pick.on + .tree-kids { background: var(--color-secondary-background); }
.bike-tree .pick.on + .tree-kids .pick:hover { background: var(--color-tertiary-background); }

.hit { cursor: pointer; border-radius: var(--base-size); transition: background .12s ease, opacity .12s ease; }
.pick .hit { opacity: 0; pointer-events: none; }
.pick.on .hit { opacity: 1; pointer-events: auto; }
.repo-settings .pick .hit { opacity: 1; pointer-events: auto; }
.hit:hover { background: var(--color-secondary-background); }
.bike-tree .pick:hover .hit:hover { background: var(--color-tertiary-background); }
svg.hit { box-sizing: content-box; padding: var(--base-size); margin: calc(-1 * var(--base-size)); }

.pick-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--base-size) * 2.5);
}

.pick-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick.open { align-items: flex-start; }

.pick-value {
  flex: 1;
  min-width: 0;
  max-width: calc(var(--base-size) * 56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick:has(.pick-value) .pick-label { flex: 0 1 auto; }

.pick-field {
  width: calc(var(--base-size) * 14);
  padding: 0 calc(var(--base-size));
  border: none;
  border-radius: calc(var(--base-size));
  background: var(--color-tertiary-background);
  color: inherit;
  font-size: inherit;
}
.pick-swatch {
  width: calc(var(--base-size) * 4);
  height: calc(var(--base-size) * 4);
  padding: 0;
  border: 1px solid var(--color-tertiary-background);
  border-radius: var(--base-size);
  background: none;
  cursor: pointer;
}
.pick-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.pick-swatch::-webkit-color-swatch { border: none; border-radius: calc(var(--base-size) * 0.75); }

.pick-edit {
  border-bottom: 1px dotted var(--color-tertiary-background);
  outline: none;
}
.pick-edit:focus { border-bottom-color: currentColor; }

.pick-text {
  flex: 1;
  min-width: 0;
  max-width: calc(var(--base-size) * 56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}
.pick-text:focus { white-space: normal; }
.json-doc .pick-text { white-space: normal; max-width: none; overflow: visible; }
.pick:has(.pick-text) .pick-label { flex: 0 1 auto; }
.pick-token { border-bottom: 1px dotted var(--color-tertiary-background); }
.pick-token.on { border-bottom-color: currentColor; }

.mono { font-family: Source Code Pro, monospace; }
.break { word-break: break-all; }
.bike-inspector { max-height: 50vh; padding: calc(var(--base-size) * 3); }
