/*@container queries*/
/* hiChar styles
Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
*/
button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  display: grid;
  block-size: 100%;
  overflow: auto;
  grid-template-areas: "aside main" "footer footer";
  grid-template-rows: 1fr max-content;
  grid-template-columns: 240px 1fr;
}

:host(.display-header-type) {
  grid-template-areas: "header header" "aside main" "footer footer";
  grid-template-rows: max-content 1fr max-content;
  grid-template-columns: 240px 1fr;
}

.section {
  display: contents;
}

.header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr max-content;
}
.header__description {
  display: grid;
  gap: var(--spacing-gap-m);
}
.header__description-p {
  max-inline-size: 460px;
}
.header__actions {
  flex-shrink: 0;
}

.aside {
  grid-area: aside;
  overflow: auto;
  border-inline-end: var(--section-common-border);
  display: grid;
  grid-template-rows: max-content 1fr;
}

.main {
  grid-area: main;
  overflow: auto;
}

.footer {
  grid-area: footer;
  justify-content: flex-start;
}

.tree-view::part(item__action tree-view-item--success),
.tree-view::part(item__action tree-view-item--warning),
.tree-view::part(item__action tree-view-item--error) {
  padding-inline-start: 24px;
}

.tree-view::part(item__action tree-view-item--success) {
  background: var(--icon__states_pill-filled_success--enabled) no-repeat;
  background-position-y: center;
}

.tree-view::part(item__action tree-view-item--warning) {
  background: var(--icon__states_pill-filled_warning--enabled) no-repeat;
  background-position-y: center;
}

.tree-view::part(item__action tree-view-item--error) {
  background: var(--icon__states_pill-filled_error--enabled) no-repeat;
  background-position-y: center;
}