/*@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 {
  container-type: inline-size;
  display: grid;
  block-size: 100%;
  overflow: auto;
  grid-template-rows: max-content 1fr max-content;
}

.section {
  display: contents;
}

.header {
  grid-template-areas: "name module-folder" "advanced-filter advanced-filter";
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content max-content;
}

.name {
  grid-area: name;
}

.module-folder {
  grid-area: module-folder;
}

.advanced-filter {
  grid-area: advanced-filter;
}

.advanced-filter__container {
  display: grid;
  grid-auto-rows: max-content;
}
.advanced-filter__first-row {
  grid-template-columns: 1fr 1fr;
}
.advanced-filter__second-row {
  grid-template-columns: 1fr 1fr 1fr;
}
.advanced-filter .all-descendants__modified {
  display: flex;
  flex-direction: row;
  align-items: center;
  block-size: 32px;
  gap: var(--spacing-gap-xl);
  align-self: self-end;
}

.field-date {
  grid-template-areas: "label-date-time label-date-time" "input-date-time icon-clear-date-time";
  grid-template-columns: 1fr max-content;
  column-gap: var(--spacing-gap-xs);
}

.label-date-time {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
  grid-area: label-date-time;
}
.input-date-time {
  block-size: 32px;
  grid-area: input-date-time;
}

.icon-clear-date-time {
  grid-area: icon-clear-date-time;
}

.tabular-grid {
  overflow: auto;
  inline-size: 100%;
  border-inline-end: var(--section-common-border);
}

.tabular-grid.empty::part(main),
.tabular-grid.loading::part(main) {
  overflow: hidden;
}

ch-tabular-grid-rowset-empty {
  position: relative;
}

.main__files-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-gap-m);
  position: relative;
  z-index: 1;
}

.hiChar {
  color: var(--color-text-primary-default);
  filter: brightness(1.3);
}

.tabular-grid ch-tabular-grid-cell:is(:nth-child(4)) {
  align-items: start;
  justify-content: start;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
}
.tabular-grid-cell-description {
  min-inline-size: max-content !important;
}

.hiChar {
  color: var(--color-text-primary-default);
  filter: brightness(1.3);
}