.pisell-lowcode-drop-sort-container {
  display: flex;
  flex-direction: column;
  gap: 12px;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }

  &-item {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    border-radius: 12px;
    border: 1px solid var(--Gray-200, #eaecf0);
    background: var(--Base-White, #fff);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    transition: all 0.3s;

    &.with-border {
      border: 1px solid #f0f0f0;
    }

    &.dragging {
      opacity: 0.5;
    }

    &-content {
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &-title {
      flex: 1;
      margin: 0 12px;
    }

    &-actions {
      display: flex;
      gap: 8px;
    }
  }

  &-children {
    padding-left: 24px;
  }

  &-disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .drag-handle {
    cursor: move;
    color: #999;

    &:hover {
      color: #666;
    }
  }

  .action-button {
    cursor: pointer;
    color: #999;

    &:hover {
      color: #666;
    }

    &.delete {
      &:hover {
        color: #ff4d4f;
      }
    }
  }
}