.media-attachment-editor {
  --media-attachment-accent: var(--shell-teal, #1bbeaa);
  --media-attachment-ink: var(--shell-text, #1a2b28);
  display: grid;
  gap: 8px;
  min-width: 0;
}

.media-attachment-editor > span { color: var(--media-attachment-ink); font-size: 12px; font-weight: 800; }
.media-attachment-editor__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.media-attachment-editor__items figure { position: relative; min-width: 0; margin: 0; }
.media-attachment-editor__preview { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #101817; cursor: zoom-in; }
.media-attachment-editor__items img,
.media-attachment-editor__items video,
.media-attachment-editor__document { display: grid; width: 100%; height: 112px; border-radius: 12px; background: #101817; object-fit: cover; place-items: center; }
.media-attachment-editor__document { color: #fff; background: #7e7ab8; font-size: 18px; font-weight: 900; }
.media-attachment-editor__items figcaption { overflow: hidden; margin-top: 4px; color: var(--shell-muted, #7a9490); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.media-attachment-editor__play { position: absolute; display: grid; color: #fff; background: rgb(0 0 0 / 38%); font-size: 13px; inset: 0; place-items: center; }
.media-attachment-editor__remove { position: absolute; top: 5px; right: 5px; display: grid; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(15, 28, 26, 0.78); font-size: 20px; place-items: center; }
.media-attachment-editor__add { position: relative; display: flex; justify-content: center; padding: 12px 0; overflow: hidden; cursor: pointer; border-top: 2px dashed color-mix(in srgb, var(--media-attachment-accent), transparent 48%); border-bottom: 2px dashed color-mix(in srgb, var(--media-attachment-accent), transparent 48%); }
.media-attachment-editor__add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.media-attachment-editor__add > span { display: grid; width: 48px; height: 48px; min-height: 0; padding: 0; border: 2px solid color-mix(in srgb, var(--media-attachment-accent), var(--media-attachment-ink) 22%); border-radius: 14px; color: var(--media-attachment-ink); background: color-mix(in srgb, var(--media-attachment-accent), transparent 90%); font-size: 27px; font-weight: 900; line-height: 1; place-items: center; }
.media-attachment-editor__add input:focus-visible + span { outline: 2px solid var(--media-attachment-accent); outline-offset: 3px; }
.media-attachment-editor__add.is-loading { cursor: wait; }
.media-attachment-editor__add.is-loading > span > i,
.media-attachment-editor__loading > i { width: 19px; height: 19px; border: 3px solid color-mix(in srgb, var(--media-attachment-accent), transparent 72%); border-top-color: var(--media-attachment-ink); border-radius: 50%; animation: media-attachment-spin 720ms linear infinite; }
.media-attachment-editor__loading { display: flex; min-height: 34px; gap: 9px; align-items: center; justify-content: center; color: var(--media-attachment-ink); font-size: 12px; }
.media-attachment-editor__loading > i { width: 16px; height: 16px; border-width: 2px; }
.media-attachment-editor__loading > strong { font-weight: 850; }

@keyframes media-attachment-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .media-attachment-editor__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-attachment-editor__items img,
  .media-attachment-editor__items video,
  .media-attachment-editor__document { height: 82px; }
}