:host {
  display: inline-block;
  max-width: 100%;
}

.file-chip {
  display: flex;
  position: relative;
  max-width: 100%;
  min-width: 15rem;
  font-size: var(--s-font-size-sm);
  line-height: var(--s-line-height-sm);
  background-color: transparent;
  border-radius: var(--s-border-radius-sm);
  outline: 1px solid var(--s-border-strong);
  outline-offset: -1px;
  padding-right: var(--s-space-16);
  gap: var(--s-space-12);
}


.file-chip:hover.file-chip--one-action .file-chip__info > *, .file-chip:focus-within.file-chip--one-action .file-chip__info > * {
    width: calc(100% - 44px - var(--s-space-12));
  }


.file-chip:hover.file-chip--two-actions .file-chip__info > *, .file-chip:focus-within.file-chip--two-actions .file-chip__info > * {
    width: calc(100% - 88px - var(--s-space-12));
  }


.file-chip:hover .file-chip__actions, .file-chip:focus-within .file-chip__actions {
    opacity: 1;
  }

.file-chip__icon {
  display: flex;
  flex-shrink: 0;
  padding: var(--s-space-16);
  background: var(--s-state-hovered);
  border-radius: var(--s-border-radius-sm) 0 0 var(--s-border-radius-sm);
  color: var(--s-icon-default);
}

.file-chip__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex-grow: 1;
}

.file-chip__name {
  font-weight: var(--s-font-weight-semibold);
}

.file-chip__description {
  color: var(--s-text-subdued);
}

.file-chip__name,
.file-chip__description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.file-chip__actions {
  display: flex;
  align-items: center;

  position: absolute;
  right: var(--s-space-16);
  top: 0;
  bottom: 0;
  opacity: 0;
}

.file-chip--type-image .file-chip__icon {
    color: var(--s-decorative-kiwi-text);
    background-color: var(--s-decorative-kiwi-surface-subdued);
  }

.file-chip--type-video .file-chip__icon {
    color: var(--s-decorative-radish-text);
    background-color: var(--s-decorative-radish-surface-subdued);
  }

.file-chip--type-audio .file-chip__icon {
    color: var(--s-decorative-grape-text);
    background-color: var(--s-decorative-grape-surface-subdued);
  }

.file-chip--type-pdf .file-chip__icon {
    color: var(--s-decorative-chilli-text);
    background-color: var(--s-decorative-chilli-surface-subdued);
  }

.file-chip--type-compressed .file-chip__icon {
    color: var(--s-decorative-pumpkin-text);
    background-color: var(--s-decorative-pumpkin-surface-subdued);
  }

.file-chip--type-document .file-chip__icon {
    color: var(--s-decorative-blueberry-text);
    background-color: var(--s-decorative-blueberry-surface-subdued);
  }

.file-chip--type-unknown .file-chip__icon {
    color: var(--s-decorative-banana-text);
    background-color: var(--s-decorative-banana-surface-subdued);
  }