/* Colours from the text around it (currentColor), so it reads on the page and on the viewer's dark stage; only Baixar takes the account's. */
.ds-file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: 22rem;
  max-inline-size: 100%;
  padding: var(--ds-space-6) var(--ds-space-4);
  text-align: center;
}

.ds-file-preview__icon {
  display: grid;
  place-items: center;
  inline-size: 88px;
  block-size: 88px;
  margin-block-end: var(--ds-space-2);
  border-radius: var(--ds-radius-2xl);
  background: color-mix(in oklch, currentColor 8%, transparent);
}

.ds-file-preview__name {
  display: -webkit-box;
  max-inline-size: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: var(--ds-font-size-lg);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ds-file-preview__facts,
.ds-file-preview__note { color: color-mix(in oklch, currentColor 70%, transparent); }
.ds-file-preview__facts { font-size: var(--ds-font-size-sm); font-variant-numeric: tabular-nums; }
.ds-file-preview__kind:not(:empty)::after { content: "\00a0·\00a0"; }
.ds-file-preview__note { font-size: var(--ds-font-size-xs); }

.ds-file-preview__download {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-block-start: var(--ds-space-3);
  text-decoration: none;
}