.lio-file-dropzone {
  display: flex;
  inline-size: 100%;
  min-block-size: 250px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-xl2) var(--space-md);
  overflow: hidden;
  border: var(--border-w) dashed var(--border);
  border-radius: var(--radius-3xl);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-geist);
  text-align: center;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.lio-file-dropzone[data-state="dragover"] {
  border-color: var(--border-brand-hover);
  background: var(--brand-surface);
}

.lio-file-dropzone[data-state="selected"] {
  border-color: var(--border-brand);
}

.lio-file-dropzone[data-state="disabled"] {
  opacity: var(--opacity-disabled);
}

.lio-file-dropzone__input {
  position: absolute;
  inline-size: var(--space-px);
  block-size: var(--space-px);
  opacity: 0;
  pointer-events: none;
}

.lio-file-dropzone__copy {
  display: grid;
  inline-size: 100%;
  gap: var(--space-xs2);
  justify-items: center;
}

.lio-file-dropzone__title {
  color: var(--text);
  font: var(--heading-l);
}

.lio-file-dropzone__description {
  margin: var(--space-zero);
  color: var(--text-tertiary);
  font: var(--body-m);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .lio-file-dropzone {
    min-block-size: 220px;
    border-radius: var(--radius-2xl);
  }
}