/*@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.
*/
:host {
  display: grid;
  block-size: 100%;
  position: relative;
}

.outer-container {
  grid-template-rows: max-content 1fr;
}

.inner-container {
  position: relative;
}

.list-box::part(item) {
  width: 100%;
  min-width: 100%;
}

.list-box::part(item__action) {
  gap: var(--spacing-gap-xs);
}

.list-box::part(item__caption) {
  font-weight: var(--font-style-semi-bold);
}

.list-box::part(custom-container) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xs);
  width: 100%;
}

.list-box::part(custom-image) {
  block-size: 32px;
  inline-size: 32px;
  margin-inline-end: 12px;
}

.list-box::part(custom-description) {
  font-size: var(--font-size-body-s);
  margin: 0;
  opacity: 0.8;
  line-height: var(--line-height-relaxed);
  margin-inline-end: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-box::part(item__block-end start) {
  width: 100%;
  min-width: 100%;
}

.list-box::part(custom-brand) {
  font-weight: var(--font-style-semi-bold);
  display: flex;
  gap: var(--spacing-gap-xs);
  align-items: center;
}

.list-box::part(custom-brand-icon) {
  --icon-path: var(--icon__system_user_neutral--enabled);
  display: inline-block;
  background-image: var(--icon-path);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  block-size: 16px;
  inline-size: 16px;
}

.list-box::part(custom-button) {
  --button-color: var(--color-text-primary-default);
  --button-color--enabled: var(--color-text-neutral-on-text);
  --button-color--active: var(--color-text-neutral-on-pressed);
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  padding-block: var(--control-padding-block);
  padding-inline: var(--control-padding-inline);
  box-sizing: border-box;
  color: var(--button-color);
  font-weight: var(--font-style-semi-bold);
  margin-block-end: auto;
  margin-block-start: auto;
  text-transform: capitalize;
}

.list-box::part(custom-button):hover {
  --button-color: var(--color-text-primary-hover);
}

.list-box::part(custom-button):active {
  --button-color: var(--color-text-primary-pressed);
}