@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.drag-overlay {
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  @include theme() {
    background-color: get(bg-color-element-mask);
    border: 2px dashed get(button-color-primary-default);
  }

  &__content {
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
    pointer-events: none;
    max-width: 90%;
    text-align: center;
    word-break: break-word;
    font-size: min(24px, max(16px, calc(100vw * 0.03)));
    line-height: 1.2;
    margin: 8px;

    @include theme() {
      color: get(text-color-link);
      background-color: get(bg-color-dialog);
      box-shadow: 0 2px 10px get(shadow-color);
    }
  }
}