.dropzone {
  align-items: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--rounded-lg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  justify-content: center;
  min-block-size: 10rem;
  padding: var(--size-6);
  transition: border-color 0.2s, background-color 0.2s;

  &:hover,
  &.dropzone--active {
    background-color: var(--color-secondary);
    border-color: var(--color-border-dark);
  }
}

.dropzone__label {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  pointer-events: none;
}

.dropzone__filename {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}