/* The shop's category and collection picker: a line saying what is chosen,
   and the tree (tree_select.css) below it once it is opened. See shop_tree.js. */

.cms-tree-picker {
  max-width: 32rem;
}

.cms-tree-picker__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  text-align: left;
  font-size: 0.95rem;
  color: var(--w-color-text-context, #262626);
  background: var(--w-color-surface-field, #fff);
  border: 1px solid var(--w-color-border-field-default, #c8c8c8);
  border-radius: 6px;
  cursor: pointer;
}

.cms-tree-picker__value:hover {
  border-color: var(--w-color-border-field-hover, #8f8f8f);
}

.cms-tree-picker.is-open .cms-tree-picker__value {
  border-color: var(--w-color-border-field-inactive, #5c5c5c);
}

.cms-tree-picker__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-tree-picker__caret {
  flex: 0 0 auto;
  color: var(--w-color-text-meta, #5c5c5c);
}

.cms-tree-picker.is-open .cms-tree-picker__caret {
  transform: rotate(180deg);
}

/* In the flow of the form rather than floating over it: a StreamField block is
   a nest of scrolling containers, and a floating panel gets clipped by one of
   them sooner or later. Only one picker is open at a time, so the form grows by
   one tree at most. */
.cms-tree-picker__panel {
  margin-top: 0.3rem;
}