/* Attachments list: <ul class="sv-files"> > <li class="sv-files__item"> icon + link + size + remove;
   upload label .sv-files__upload; file-link.html.twig (.sv-file-link). */

.sv-files {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-files__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-1) var(--sv-space-3);
  min-height: 2.75rem;
  margin: 0;
  padding: var(--sv-space-1) var(--sv-space-1) var(--sv-space-1) var(--sv-space-3);
  border: 1px solid var(--sv-color-border);
  border-radius: var(--sv-radius-md);
  background: var(--sv-color-surface);
}
.sv-files__item + .sv-files__item { margin: 0; }
.sv-files__item > .sv-icon { color: var(--sv-color-text-muted); }
.sv-files__link {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-files__meta {
  flex: none;
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sv-files__item.is-uploading { border-style: dashed; color: var(--sv-color-text-muted); }
.sv-files__item.is-uploading > .sv-icon { animation: sv-spin 0.8s linear infinite; }
.sv-files__item.is-error { border-color: var(--sv-error-border); background: var(--sv-error-bg); color: var(--sv-error-fg); }
.sv-files__error { flex-basis: 100%; padding-bottom: var(--sv-space-1); font-size: var(--sv-text-sm); }

.sv-files__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2) var(--sv-space-3);
  margin-top: var(--sv-space-3);
}
.sv-files__upload label.sv-button:focus-within { box-shadow: var(--sv-focus-ring); }
.sv-files__hint { color: var(--sv-color-text-muted); font-size: var(--sv-text-xs); }
.sv-files__empty { margin: 0; color: var(--sv-color-text-muted); font-size: var(--sv-text-sm); }

.sv-file-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  max-width: 100%;
}
.sv-file-link > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-file-link__size { color: var(--sv-color-text-muted); font-size: var(--sv-text-xs); white-space: nowrap; }