/* The persistent folder sidebar on the images listing (collection_tree.js).
   The tree widget itself is styled in tree_select.css, which the shop pickers
   share. */

.cms-tree-imglayout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.cms-tree-sidebar {
  flex: 0 0 16rem;
  position: sticky;
  top: 1rem;
  padding-left: 1.5rem; /* match the listing's nice-padding gutter */
}

.cms-tree-sidebar__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.4rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-color-text-meta, #5c5c5c);
}

.cms-tree-sidebar__add {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--w-color-text-link-default, #007d7e);
  text-decoration: none;
}

.cms-tree-sidebar__add:hover {
  text-decoration: underline;
}

.cms-tree-sidebar .cms-tree {
  max-width: none;
}

.cms-tree-imglayout > #listing-results {
  flex: 1 1 auto;
  min-width: 0; /* let the grid shrink instead of overflowing the flex row */
}

@media (max-width: 800px) {
  .cms-tree-imglayout {
    display: block;
  }
  .cms-tree-sidebar {
    position: static;
    padding-left: 0;
    margin-bottom: 1rem;
  }
}