/**
 * TRASCINAMENTO OGGETTI
 * Componente per il trascinamento degli oggetti
 */

@layer components {
  .rtds-trascinamento-oggetti {
    --_trascinamento-oggetti-bg: var(--trascinamento-oggetti-bg, var(--color-background-01, var(--color-neutral-50)));
    --_trascinamento-oggetti-border: var(--trascinamento-oggetti-border, var(--color-border-gray-03, var(--color-neutral-600)));
    --_trascinamento-oggetti-text: var(--trascinamento-oggetti-text, var(--color-content-03, var(--color-neutral-800)));
    --_trascinamento-oggetti-btn-bg: var(--trascinamento-oggetti-btn-bg, transparent);
    --_trascinamento-oggetti-btn-text: var(--trascinamento-oggetti-btn-text, var(--color-content-01, var(--color-neutral-900)));
  }

  .rtds-trascinamento-oggetti__button-area {
    background-color: var(--_trascinamento-oggetti-bg);
    border-color: var(--_trascinamento-oggetti-border);
  }

  .rtds-trascinamento-oggetti__description {
    color: var(--_trascinamento-oggetti-text);
  }


  .rtds-trascinamento-oggetti__button {
    background-color: var(--_trascinamento-oggetti-btn-bg);
    color: var(--_trascinamento-oggetti-btn-text);
  }

  /* Stato has-dragged-content */
  .has-dragged-content {
    --trascinamento-oggetti-bg: var(--color-focusring);
    --trascinamento-oggetti-border: var(--color-border-gray-04, var(--color-neutral-800));
    --trascinamento-oggetti-text: var(--color-content-inverse, var(--color-neutral-50));
    --trascinamento-oggetti-btn-bg: var(--color-background-inverse, var(--color-neutral-50));
    --trascinamento-oggetti-btn-text: var(--color-content-placeholder, var(--color-secondary-500));
  }

}