.dnd {
  &__item {
    box-sizing: border-box;
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
  }

  &__item-placeholder {
    border: 1px solid transparent;
    background-color: var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe));
    color: transparent;
    cursor: grabbing;
  }

  &__list {
    position: relative;
    display: inline-block;
  }

  &__grid-item-placeholder {
    border: 1px solid transparent;
    background-color: var(--wds-color-black-700, var(--wsr-color-D70, #eceff3));
    color: transparent;
    cursor: grabbing;
  }

  &__grid-item-placeholder#{&}__is-initial-position-to-drop {
    background-color: var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe));
  }

  &__with-grid-item-strip::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 100%;
    border-radius: 2px;
    background: var(--wds-color-blue-0, var(--wsr-color-B00, #084ebd));
    right: -12px;
  }

  &__with-grid-item-strip#{&}__with-grid-item-strip-right::after {
    right: 0;
    left: -12px;
  }

  &__grid-item-preview {
    background-color: var(--wds-color-blue-500, var(--wsr-color-B50, #e7f0ff));
  }
}