button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  --search-input-max-inline-size: 400px;
  display: grid;
  block-size: 100%;
}

:host(:not(.has-footer)) {
  grid-template-rows: max-content 1fr;
}

:host(.has-footer) {
  grid-template-rows: max-content 1fr max-content;
}

.header.has-active-item {
  grid-area: header;
}

.section {
  display: contents;
}

.header__first-row, .header__second-row {
  display: grid;
  grid-auto-flow: column;
}
.header__first-row {
  grid-auto-columns: max-content;
}
.header__second-row {
  grid-template-columns: minmax(150px, var(--search-input-max-inline-size)) max-content;
}
.header__second-row--one-row {
  grid-template-columns: minmax(150px, var(--search-input-max-inline-size));
}

.active-item {
  background-color: var(--color-accent-surface-elevation-1);
  border-radius: 4px;
  padding: var(--control-padding-block) var(--control-padding-inline);
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
}

.active-item__icon-container {
  display: contents;
}
.active-item__icon {
  pointer-events: none;
}
.active-item__link {
  text-decoration: underline;
  color: var(--color-text-primary-default);
  cursor: pointer;
}
.active-item__link:hover {
  color: var(--color-text-primary-hover);
}
.active-item__link:active {
  color: var(--color-text-primary-pressed);
}

.trees {
  position: relative;
}