:host {
  display: block;
}

.image-field {
  display: flex;
  gap: var(--space-sm, 0.5rem);
  align-items: flex-start;
}

.image-field__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-color, #d3dad9);
  object-fit: cover;
  background: #fbfcfc;
  flex-shrink: 0;
}

.image-field__thumb--empty {
  background: repeating-conic-gradient(#f0f2f1 0% 25%, #fbfcfc 0% 50%) 0 0 / 12px 12px;
}

.image-field__controls {
  flex: 1;
  display: grid;
  gap: var(--space-sm, 0.5rem);
}

.image-field__actions {
  display: flex;
  gap: var(--space-sm, 0.5rem);
}
