$default-variables: (
  "Drag-and-Drop____border": dashed 1px var(--color--gray-2),
  "Drag-and-Drop--disabled____border": dashed 1px var(--color--gray-3),
  "Drag-and-Drop--dragged-over____border": dashed 1px var(--color--gray-2),
  "Drag-and-Drop--error____border": solid 1px var(--color--alert),
  "Drag-and-Drop--success____border": solid 1px var(--color--dscout),

  "Drag-and-Drop____background-color": var(--color--gray-6),
  "Drag-and-Drop--disabled____background-color": var(--color--gray-6),
  "Drag-and-Drop--dragged-over____background-color": var(--color--gray-5),
  "Drag-and-Drop--error____background-color": rgba(var(--color--alert-rgb), .05),
  "Drag-and-Drop--success____background-color": rgba(var(--color--dscout-rgb), .05),

  "Drag-and-Drop____color": var(--color--gray-2),
  "Drag-and-Drop--disabled____color": var(--color--gray-3),
  "Drag-and-Drop--dragged-over____color": var(--color--gray-2),
  "Drag-and-Drop--error____color": var(--color--alert),
  "Drag-and-Drop--success____color": var(--color--dscout),

  "Drag-and-Drop____radius": var(--radius--small)
) ;

@mixin generate-drag-and-drop-theme-variables($theme-variables: ()) {
  $variables: map-merge($default-variables, $theme-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}