.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 8px 0 4px;
  background: var(--ui-panel-header);
  border-bottom: 1px solid var(--ui-panel-header-border);
  user-select: none;
}

.panel-header__toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 4px;
  font-weight: 600;
  color: var(--ui-panel-header-text);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.panel-header__toggle:focus {
  outline: none;
}

/* Focus rings inside the elements: a panel cuts what goes over its edges. */
.panel-header__toggle:focus-visible {
  outline: 1px solid var(--ui-focus);
  outline-offset: -1px;
}

.panel-header__actions :focus-visible,
.panel-header__tools :focus-visible {
  outline-offset: -1px;
}

.panel-header__actions :is(input, select, textarea):focus {
  box-shadow: inset 0 0 0 1px var(--ui-focus);
}

/* Arrow: down when open, right when collapsed. An SVG mask takes the color of the theme. */
.panel-header__arrow {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--ui-panel-header-arrow);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3h8L5 8z'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

.panel-header.is-collapsed .panel-header__arrow {
  transform: rotate(-90deg);
}

.panel-header__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-header__actions,
.panel-header__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.panel-header__tools:empty {
  display: none;
}

/* Actions show only while the panel is open. */
.panel-header.is-collapsed .panel-header__actions {
  display: none;
}