/*@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-accordion advanced-filter-accordion";
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content max-content;
}

.name {
  grid-area: name;
}

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

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

.main {
  --sidebar-width: 376px;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  overflow: auto;
  padding-block-start: var(--size-16);
}

.main__grid {
  overflow: auto;
  position: relative;
}

.tabular-grid-ww-images {
  overflow: auto;
  border-inline-end: var(--section-common-border);
}

ch-tabular-grid-rowset-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  z-index: 1;
}

.main__aside {
  overflow: auto;
  display: grid;
  grid-template-rows: max-content 1fr;
}

.main__filter {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "category options after" "style language user" "density layer date-time" "search-by-contents search-by-contents button-reset";
  overflow: auto;
}

.category {
  grid-area: category;
}

.options {
  grid-area: options;
}

.after-date-time {
  grid-area: after;
}

.user {
  grid-area: user;
}

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

.style {
  grid-area: style;
}

.language {
  grid-area: language;
}

.density {
  grid-area: density;
}

.layer {
  grid-area: layer;
}

.search-by-contents {
  grid-area: search-by-contents;
}

.button-reset {
  grid-area: button-reset;
  align-self: end;
  justify-self: end;
}

.main__images-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-8);
  position: relative;
  z-index: 1;
}
.main__images-container .figure {
  margin: 0;
  background-color: var(--color-accent-surface-elevation-2);
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content;
  gap: var(--size-4);
  padding: var(--size-8);
  border-radius: var(--size-4);
  opacity: 0;
  animation: fadeIn 300ms forwards;
  aspect-ratio: 1/1;
}
.main__images-container .figure__picture {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 0;
}
.main__images-container .figure__img {
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.main__images-container .figure__figcaption {
  text-align: center;
  font-size: var(--font-size-body-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  inline-size: 100%;
}

.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) {
  align-items: start;
  justify-content: start;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@container (max-width: 992px) {
  .main {
    --sidebar-width: 288px;
  }

  .main__images-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container (max-width: 768px) {
  .main {
    --sidebar-width: 200px;
  }

  .main__images-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (max-width: 640px) {
  .main {
    --sidebar-width: 112px;
  }

  .main__images-container {
    grid-template-columns: 1fr;
  }
}