@uploadcare/blocks/blocks/DropArea/drop-area.css

Building blocks for Uploadcare products integration

lr-drop-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-min);
  border: var(--border-dashed);
  border-radius: var(--border-radius-frame);
  transition: border-color var(--transition-duration) ease, background-color var(--transition-duration) ease,
    opacity var(--transition-duration) ease;
}

lr-drop-area::after {
  color: var(--clr-txt-light);
  content: var(--l10n-drop-files-here);
}

lr-drop-area[ghost][drag-state='inactive'] {
  opacity: 0;
}

lr-drop-area[drag-state='inactive'] {
  background-color: var(--clr-shade-lv1);
}

lr-drop-area[drag-state='active'] {
  background-color: var(--clr-accent-lightest);
  opacity: 1;
}

lr-drop-area[drag-state='near'] {
  opacity: 1;
}

lr-drop-area[drag-state='near'],
lr-drop-area:hover {
  background-color: var(--clr-accent-lightest);
  border-color: var(--clr-accent-light);
}

lr-drop-area[drag-state='over'] {
  background-color: var(--clr-accent-lightest);
  border-color: var(--clr-accent);
  opacity: 1;
}