/*@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%;
  grid-template: "header header" max-content "objects-in-file import-status" 1fr "footer footer" max-content;
  grid-template-columns: 1fr 1fr;
}

.section {
  display: contents;
}

.header {
  grid-template-columns: 1fr max-content;
  grid-area: header;
}

.objects-in-file__section {
  grid-area: objects-in-file;
}

.objects-in-file__main {
  border-inline-end: var(--section-common-border);
  grid-template-rows: 1fr max-content;
}

.objects-in-file__footer {
  display: grid;
}

.import-status__section {
  grid-area: import-status;
}

.import-status__main {
  grid-template-rows: 1fr max-content;
}

.import-status__footer {
  display: flex;
}

.import-clear-status-btn {
  margin-inline-start: auto;
}

.objects-in-file__section,
.import-status__section {
  display: grid;
  grid-template-rows: max-content 1fr;
}

.dialog-header__objects-in-file,
.dialog-header__import-status {
  padding-block-start: 16px;
}

.objects-in-file__main,
.import-status__main {
  grid-auto-rows: max-content;
  padding-block: 12px;
  overflow: auto;
}

.footer {
  display: flex;
  grid-area: footer;
  border-block-start: var(--section-common-border);
}

.text-align-center {
  text-align: center;
}

.tree-view::part(item__action tree-view-item--status) {
  grid-template: "first-img left-img text right-img"/max-content max-content 1fr max-content;
}
.tree-view::part(item__action tree-view-item--status)::before {
  grid-area: first-img;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gray-03);
  margin-inline-end: 2px;
}

.tree-view::part(item__action tree-view-item--success):before {
  background-image: none;
  background-color: var(--color-success-dark);
}

.tree-view::part(item__action tree-view-item--warning):before {
  background-image: none;
  background-color: var(--color-warning-dark);
}

.tree-view::part(item__action tree-view-item--error):before {
  background-image: none;
  background-color: var(--color-error-dark);
}

.tree-view-import::part(item) {
  content-visibility: auto;
  contain-intrinsic-size: auto 22px;
}