/*@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: block;
}

.file-item {
  display: grid;
  column-gap: var(--spacing-gap-l);
  row-gap: var(--spacing-gap-s);
  align-items: center;
  border-radius: var(--border-radius-s);
}
.file-item--without-actions {
  grid-template-columns: max-content 1fr;
  grid-template-areas: "icon name";
}
.file-item--with-actions {
  grid-template-columns: max-content 1fr max-content;
  grid-template-areas: "icon name actions";
}
.file-item__icon {
  display: flex;
  align-items: center;
  grid-area: icon;
  padding-block: calc(32px - var(--ch-image-size));
}
.file-item__name {
  grid-area: name;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-inline-size: 0;
}
.file-item__name ch-edit {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file-item__name .label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file-item__actions {
  grid-area: actions;
  display: flex;
}
.file-item__cancel-upload {
  transform: translateX(7px);
}
.file-item__progress-container {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xs);
  border: 2px dashed var(--color-border-neutral-default);
  border-radius: var(--border-radius-m);
  padding: var(--spacing-padding-xxs) var(--spacing-padding-l) var(--spacing-padding-m) var(--spacing-padding-l);
}
.file-item__progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-gap-l);
}
.file-item__uploading-text {
  color: var(--color-text-neutral-disabled);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-inline-size: calc(100% - 40px);
}
.file-item__progress-bar progress {
  block-size: 8px;
  line-height: 0;
  border: none;
  border-radius: var(--border-radius-s);
  overflow: hidden;
}
.file-item__progress-bar progress::-webkit-progress-bar {
  background-color: transparent;
}
.file-item__progress-bar progress::-webkit-progress-value {
  background-color: var(--color-accent-primary-default);
}
.file-item__progress-bar progress::-moz-progress-bar {
  background-color: var(--color-accent-primary-default);
}